共有コンポーネントの一部のプロパティを変更 - 角2

Question

私は共有コンポーネントを持っています - headerbarComponent - プロパティ - headerTitle。どのページが最新であるかを示すために使用します。そして、私はロードされたテンプレートに捧げられたこのタイトルを変更する必要があります。新しいコンポーネントがロードされOnсeそれはタイトルが変更されたことは、JSコンソールに示し方法

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

呼び出しますが、全くヘッダの変更はありません。

<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