angular2 - передать значение от родительского маршрута до детского маршрута

Question

У меня есть маршрут, называемый home, и у него есть три дочерних маршрута, документы, почта и корзина. В компоненте домашнего маршрута у него есть переменная, называемая «пользователь». Я знаю, что есть несколько способов передачи информации между родительскими и дочерними компонентами, выделенными here, но как я могу передать информацию между родительскими/дочерними маршрутами.

{ 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> 

Answer 1

Вы можете использовать общую услугу для передачи данных, как описано в разделе 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 
    } 
} 

объект Service будет тот же экземпляр в ребенка, если добавить поставщика в родителе.

Надеюсь, что это поможет!

Answer 2

Отъезд: - https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

Вы можете передать данные при изменении маршрутов по щелчку, как: -

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