我有一个使用 angular 2 的设计,其中加载了所有其他组件的标题组件、导航栏组件和主体组件。 如下图所示
- 标题
- 导航
- 加载其他组件的位置(此部分可能已嵌套 组件/子组件)
基本上,在标题组件中,我想显示当前状态。在当前状态的底部,我想显示用户的以前的状态。
问题: 为了实现这一点,我使用了 Angular 组件交互技术。
应用重新加载后,它会显示当前和
的默认值 背面状态。在用户直接登陆到特定页面的场景中,该页面也是 body 中的子组件,它显示默认 当前和后退状态的值。
由于 Angular 遵循组件架构,我想要一种更好的方法来实现此功能。
如果我直接进入图片中第 3 部分的子组件,我的标题组件应该根据标题组件中的特定页面获取标题/当前状态。
我的解决方案是在每个组件中,当 ngOnInit 传递当前状态值时。我还解析了以前的状态值。因此, header 组件按原样显示,因为服务是使用此链接中的技术编写的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html
但在某些情况下,我从服务器获取数据并且必须更新 header 的当前状态。在那里我看到根本没有显示。
需要一个好的解决方案的帮助。
PS - 由于这个机制在不同的文件中,有点复杂,我无奈更新代码模板
最佳答案
虽然看起来很简单,但是可以通过子组件和Input、Output变量来实现。
用于显示服务内容的子组件
@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);
}
}
解释:
- 当进行服务调用并且标题值发生更改时。
- 在更改输入属性时,将自动触发 ngOnChanges。
- titleChanged 是 Output() 变量并在执行 ngOnChanges 时发出一个值。
- 当 titleChanged 被触发时,changedTitle() 中的关联方法将被执行。
注意:为了显示这是有效的,我使用了一个文本框并将其分配给 div 元素,您可以在路由组件的构造函数中修改它。
关于Angular 2 Header组件标题根据状态动态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40790938/