更改共享组件中的某些属性 - Angular 2

Question

我有一个共享组件 - headerbarComponent - 带有属性 - headerTitle。我用它来显示哪一页是最新的。我需要改变这个标题depriding在一个加载的模板。 Onсe一个新的组件加载它调用的方法

headerbarComponent.setTitle(newTile) { this.headerTitle = newTitle } 

它显示在JS控制台标题改变，但有一个在头以不变应万变。

<div>{{headerTitle}}</div> 

如何更改此标题？

Answer 1

您可以创建一个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; 
    } 
); 

而最简单的部分是从任何你想要的组件更新这个标题：

updateTitle() { 
    this.headerService.setTitle('Home title'); 
} 

以下是一个工作示例：https://plnkr.co/edit/f8vmbd30K6tzBZyPFJLS?p=preview