角2/4未読/見えないメッセージの数を表示

Question

私はAngular 2/4で（gmail doと同様に）アプリを表示するメッセージを実装しようとしていました。 サイドバーに未読メッセージの数（たとえば、inbox.component.ts）を表示する必要があります（例：sidebar.component.ts）。

私は1 this.unSeenMsg = this.unSeenMsg-1によって数を減らす未読メッセージの1を打つには、未読のメッセージ（ ngOnInit()に初期化）の値を保持する変数（ unSeenMsg発言を）持って受信トレイコンポーネントで

。

サイドバーにunSeenMsgの値を通知する方法はありますか。

流れの話、私はレイアウトコンポーネント（サイドバーはこの1つの子供である） 受信トレイを持っているいくつかのいずれかをすることができます私に

Answer 1

を助けることを願って

後の時間に初期化され、別のコンポーネントでありますあなたが最初にデータを取得し、あなたがなどのコンポーネントでそれを設定することができたら、型対象

export class notifyServic { 
    private unseenCount = 0; 
    unSeenMsgChange: Subject<number> = new Subject<number>(); 
    UpdateUnseen(count: number) { 
     this.unseenCount = count; 
     this.unSeenMsgChange.next(this.unseenCount); 
    } 
} 

の変数でサービスを利用

this.conversation.getMessages().subscribe(resultmessages => { 
    this.notifyServic.UpdateUnseen(this.resultmessages.length); 
}, error => this.errorMessage = error); 

れ、読み取らhttps://angular.io/guide/component-interaction

、等の他の成分に

notifyServic.unseenCount; 

Answer 2

を使用します。

ここに少しの例があります。親コンポーネント：親のHTMLで

this.updateChild = this.unSeenMsg; 

：子コンポーネントで

<sidebar [childCounter]=updateChild ></sidebar> 

：

@Input() childCounter: any; 

、サイドバーのHTMLでchildCounterを示しました。