Angular2コンポーネントへの関数結果のバインド（TypeScript）

Question

Webソケットから通知を取得する小さなサービスがあります。 fillThemSomehow()メソッドでは、配列を取得して配列に格納します。

@Injectable() 
export class WebsocketNotificationHandler { 
    notifications: Array<Notification>; 

    constructor() { 
     this.notifications = []; 
    } 

    fillThemSomehow(): void {} 
} 

コンポーネントは、通知取得し、表示するには、このサービスを使用しています。

@Component({ // selector, template, styles, pipes included }) 
export class NotificationsComponent { 
    notificationsFilter: string = ''; 

    constructor(private _wsNotiHandler: WebsocketNotificationHandler) {} 

    getLastNotifications(): Array<Notification> { 
     return this._wsNotiHandler.notifications; 
    } 
} 

を...とコンポーネントのHTML：これまで

<input class="form-control" [(ngModel)]="notificationsFilter"> 
<div class="well notification" *ngFor="let notification of getLastNotifications()"> 
    <span [innerHtml]="notification.getHtml()"></span> 
    <small class="pull-right">{{notification.time | dateTime}}</small> 
</div> 

とても良い、これはかなりうまく動作します。 WebsocketNotificationHandlerが新しい通知を配列に追加するとすぐに、それらはコンポーネントビューに表示されます。これは素晴らしいことです。

カスタムパイプを使用してビュー内の通知をフィルタリングする場合、サービスの配列内の変更は、notificationsFilterモデルが変更されたため、入力のキーストロークで直接UIにパブリッシュされません。 ngForのテンプレートコードは次のようになります。

<div class="well notification" *ngFor="let notification of getLastNotifications() | search:notificationsFilter"> 

SearchPipeはテストされ、その仕事をしています。私の唯一の問題は、このソリューションはWebsocketNotificationHandler.notificationsの変更に反応しないということです。それを反応させるために私は何ができますか？

私はTypeScriptとAngular2 RC.1を使用しています。

Answer 1

オブジェクト自体が異なる場合にのみ変更検出が実行されるとき、Angularはオブジェクトの内容をチェックしません。 pure: false

@Pipe({ 
    name: 'flyingHeroes', 
    pure: false 
}) 

パイプが同じ配列インスタンスであっても実行されるように設定することができます。

も参照してください。https://angular.io/docs/ts/latest/guide/pipes.html