angular2 - 将值从父路由传递到子路由答案

【问题标题】：angular2 - Pass value from parent route to child routeangular2 - 将值从父路由传递到子路由
【发布时间】：2016-12-08 13:55:55
【问题描述】：

我有一条叫做 home 的路由，它有三个子路由，documents，mail 和垃圾箱。在主路由组件中，它有一个名为“用户”的变量。我知道有几种方法可以在父组件和子组件之间传递信息，突出显示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>

【问题讨论】：

标签： javascript angularjs angular components ngroute

【解决方案1】：

您可以使用公共服务来传递数据，如Angular Documentation 中所述

基本上，您可以创建一个包含用户对象的服务，一旦您的父路由被加载或对父组件进行一些操作，就可以更新该用户对象。

用户服务

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

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

然后当子路由组件被加载时，您可以从服务中检索值。

主页组件

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

邮件组件

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

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

如果您在父级中添加提供者，则服务对象在子级中将是相同的实例。

【讨论】：

对你不起作用，你无法实现这个，或者你有一些不同的场景？如果有不同的情况，请添加更多详细信息。
在我的 html 模板中，我有一个 ngIf 来检查用户是否登录。但是，它没有读取检查的服务方法。
您可以添加一个可以根据订阅更新的变量，并在子组件的ngIf中使用它。
是的，可以。所以我必须为我拥有的每个组件导入此服务？还有其他方法吗？
后续，angular.io/guide/component-interaction#!#bidirectional-service 的“父母和孩子通过服务进行交流”部分解释说，The scope of the service instance is the parent component and its children. Components outside this component subtree have no access to the service or their communications.

【解决方案2】：

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

您可以在点击更改路线时传递数据：-

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

【讨论】：