angular2 - 將父值路由傳遞給子路由

我有一個稱爲home的路由，它有三個子路由，文檔，郵件和垃圾。在home路由組件中，它有一個名爲'user'的變量。我知道有幾種方法在突出顯示here的父組件和子組件之間傳遞信息，但我如何在父/子路徑之間傳遞信息。angular2 - 將父值路由傳遞給子路由

{ path: 'home', component: HomeComponent, children: [ 
     { path: 'documents', component: DocumentsComponent }, 
     { path: 'mail', component: MailComponent }, 
     { path: 'trash', component: TrashComponent }, 
    ] 
},

服務

import { Injectable } from '@angular/core'; 
@Injectable() 
export class HomeService { 
    // Mock user, for testing 
    myUser = {name:"John", loggedIn:true}; 
    // Is Super Admin 
    isLogged():boolean { 
    if(this.myUser.role == true){ 
     return true ; 
    } 
    return false ; 
    } 
}

組件

constructor(public router: Router, public http: Http, private homeService: HomeService) { 

    } 

    isLogged(){ 
    return this.homeService.isLogged(); 
    }

模板

<div class="side-nav fixed" > 
    <li style="list-style: none"> 
     <img alt="avatar" class="circle valign profile-image" height="64" src= 
     "../images/avatar.jpg" width="64"> 
     <div class="right profile-name"> 
      <!-- Value not changing even with service --> 
      {{myUser.role}} 
     </div> 
    </li>

來源

2016-08-03 John

您可以使用通用服務來傳遞數據，如Angular Documentation

基本上，您可以創建一個服務，該服務具有一個用戶對象，一旦您的父路由加載或對父組件執行某些操作，該服務就可以更新。

UserService

import { Injectable } from '@angular/core'; 
    import { Subject } from 'rxjs/Subject'; 

    @Injectable() 
    export class UserService { 
    // Observable user 
    user = new Subject<string>(); 
    }

，然後在子路徑組件被加載，你可以檢索與服務的價值。如果您在父添加提供商

HomeComponent

@Component({ 
    ... 
}) 
export class HomeComponent{ 
    ... 
    constructor(private userService:UserService){} 
    someMethod =() =>{ 
     this.userService.user.next(<pass user object>); 
    } 
}

MailComponent

@Component({ 
    ... 
}) 
export class HomeComponent{ 
    ... 
    constructor(private userService:UserService){ 
    this.userService.user.subscribe(userChanged); 
    } 

    userChanged = (user) => { 
    // Do stuff with user 
    } 
}

服務對象將是孩子相同的實例。

希望這有助於！

來源

2016-08-03 02:59:02

我 – John

不工作，不爲你在工作，你是不是能夠實現這一點，或者你有一些不同的場景？如果情況不同，請添加更多細節。 –

在我的html模板中，我有一個ngIf來檢查用戶是否登錄。但是，它沒有讀取檢查的服務方法。 – John

退房： - https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

可以傳遞數據，同時改變對點擊的路線： -

<a [routerLink]="['/crisis-center', { foo: myVar }]">Crisis Center</a>

來源

2016-08-03 05:35:50

angular2 - 將父值路由傳遞給子路由

回答

相關問題