angular2-将值从父管线传递到子管线
angular2 - Pass value from parent route to child route
本文关键字:angular2- 更新时间:2023-09-26
我有一个名为home的路由,它有三个子路由,文档、邮件和垃圾。在主路由组件中,它有一个名为"user"的变量。我知道有几种方法可以在父组件和子组件之间传递信息,但我应该如何在父/子路由之间传递信息。
{ 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>
您可以使用通用服务来传递数据,如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
}
}
若在父级中添加提供程序,则服务对象将是子级中的同一实例。
退房:-https://angular.io/docs/ts/latest/guide/router.html##链路参数阵列
您可以在更改路线时传递数据,点击如下:-
<a [routerLink]="['/crisis-center', { foo: myVar }]">Crisis Center</a>
相关文章:
- 如何在Angular2中使用jQuery插件
- 不能从angular2中的子组件指定父组件中的数组
- 如何为生产构建angular2应用程序
- 使用javascript协调angular2组件
- Angular2将组件方法导入到另一个组件中
- Angular2在装载前
- Angular2/JavaScript-如何显示localStorage保存的所有变量并获取所有键的总长度
- 基于路由的CSS样式-Angular2
- Angular2 ngFor—已选择集
- Angular2他们如何保存到缓存
- Angular2 rc1, where is shims_for_IE
- angular2中的全局服务不工作
- 如何在重建URL后从URL中传递过滤值,目的是使用Angular2和Typescript实现无限滚动
- Angular2-RadioButtonState未按预期工作
- Angular2-*ngIf:如何显示特定元素
- Angular2-TypeError:无法读取属性'Id'(Typescript)中未定义的
- Angular2/JavaScript-按1递增/递减(单击)
- Angular2组件未从视图中呈现javascript
- 如何将此JS翻译成Angular2
- Angular2:Index.html没有't显示该文件;正在加载&”;