我有一个共享组件 - headerbarComponent - 带有属性 - headerTitle。我用它来显示哪个页面是最新的。我需要在加载的模板上更改此标题。在加载新组件时,它调用方法
headerbarComponent.setTitle( newTile ) { this.headerTitle = newTitle }
它在JS控制台中显示标题已更改但标题根本没有变化。
<div>{{headerTitle}}</div>
如何更改此标题?
答案 0 :(得分:0)
您可以创建.send()
的服务,该服务将“监视”任何更改:
new Subject()
您的共享组件需要订阅并更新您的标题:
@Injectable()
export class HeaderService {
private headerTitleSubject: Subject<string> = new Subject<string>();
constructor() { }
setTitle(title: string) {
this.headerTitleSubject.next(title);
}
onSetTitle() {
return this.headerTitleSubject;
}
}
最简单的部分是从您想要的任何组件更新此标题:
this.headerService.onSetTitle().subscribe(
newTitle => {
this.title = newTitle;
}
);
以下是一个工作示例:https://plnkr.co/edit/f8vmbd30K6tzBZyPFJLS?p=preview