我有一条名为home的路线,它有三条子路线,文件,邮件和垃圾。在归属路由组件中,它有一个名为' user'的变量。我知道有几种方法可以在突出显示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>
答案 0 :(得分:6)
您可以使用公共服务传递数据,如Angular Documentation
中所述基本上你可以创建一个具有用户对象的服务,一旦你的父路由被加载或者在父组件上有一些动作就可以更新。
<强> UserService 强>
@Component({
...
})
export class HomeComponent{
...
constructor(private userService:UserService ){}
someMethod = () =>{
this.userService.user.next(<pass user object>);
}
}
然后当子路由组件被加载时,您可以从服务中检索该值。
<强> HomeComponent 强>
@Component({
...
})
export class HomeComponent{
...
constructor(private userService:UserService ){
this.userService.user.subscribe(userChanged);
}
userChanged = (user) => {
// Do stuff with user
}
}
<强> MailComponent 强>
{{1}}
如果您在父级中添加提供程序,则服务对象将与子级中的实例相同。
希望这有帮助!!
答案 1 :(得分:1)
退房: - https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array
您可以在点击时更改路线时传递数据: -
<a [routerLink]="['/crisis-center', { foo: myVar }]">Crisis Center</a>