更改共享組件中的某些屬性 - 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