Angular 2标头组件标题根据状态动态变化
|
我有一个使用角度2的设计,其中所有其他组件加载的标题组件,导航栏组件和主体组件.
如下图所示 >标题 所以基本上,在标题组件中,我想显示当前状态.并且在当前状态的底部,我想显示用户的先前状态. 问题： >重新加载应用后,它会显示当前和的默认值 由于angular遵循组件架构,因此我想要一种更好的方法来实现此功能. 如果我直接进入图片中第3部分的子组件,我的标题组件应根据标题组件中的特定页面获取标题/当前状态. 当ngOnInit I传递当前状态值时,我的解决方案是在每个组件中.我也解析以前的状态值.因此,标头组件显示它,因为服务是使用此链接中的技术编写的 – https://angular.io/docs/ts/latest/cookbook/component-communication.html 但是有些情况下我从服务器获取数据并且必须更新标头当前状态.在那里,我看到根本没有显示. 需要帮助以获得良好的解决方案 PS – 由于这种机制在不同的文件中,并且有点复杂,我无法更新代码模板
虽然它看起来很简单,但它可以使用子组件和输入,输出变量来实现.
子组件,用于显示服务中的内容 @Component({
selector: 'title',template: `
<div> {{title}}</div>
`,})
export class TitleComponent implements ngOnChanges{
@Input() title:string="";
@Output() titleChanged:EventEmitter<string>=new EventEmitter<string>();
constructor(){
//service call goes here
}
ngOnChanges(){
console.log(this.val);
this.titleChanged.emit(this.title);
}
}
父组件将为 @Component({
selector: 'my-app',template: `
<div>
<h2>Hello {{name}}</h2>
<title (titleChanged)="changedTitle($event)" [title]="title"></title>
</div>
`,})
export class App {
name:string;
title:string="some title";
val:string;
constructor() {
this.val="";
}
changedTitle(va;){
this.title="val"
console.log(val);
}
}
说明： >进行服务呼叫并更改标题值时. LIVE DEMO 注意：为了显示这是有效的,我使用了一个文本框并将其分配给div元素,您可以在路由组件的构造函数中修改它. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |