0

まず、私のコードは機能しています。この質問は、私が適切なことをしているかどうか、およびangular 2の力を使用しているかどうかに関するものです。私はangular 1から来て、angular 2のコアコンセプトをまだ学んでいます。

はじめましょう：

angular 2 アプリ (RC.4) が与えられた場合、カレンダーをビューとしてレンダリングするカレンダー コンポーネントがあります。各カレンダーの日は、API レスト コールの結果に応じて、赤 (ビジー) または緑 (フリー) で「装飾」されます。特定の日のデータがない場合、その日はまったく装飾されません。

したがって、カレンダーの @component に次の Observable があります。解決されると、コンポーネントの「エントリ」のプロパティに応答が入力されます。(応答は、プロパティ「dayStatus」がビジー/グリーンに設定された日のオブジェクトの配列です)。

 ngOnInit() {
        this.calendarService.getAll().subscribe(
            response => {
                this.entries = response.json();
            }
        );
    }

カレンダー テンプレートには、decorateDay() ハンドラに解決される ngClass があります。

<span class="day" *ngFor="let day of week.days"
      [ngClass]="decorateDay(day)">
        {{ day.number }}
</span>

したがって、すべての「日」は、宣言的な方法で、decorateDay(day) ハンドラーを介して、緑または赤で装飾する必要があるかどうかを調べます。次のように機能します。「日」はパラメーターとして渡され、JSON 配列から関連するオブジェクトを取得するためのキーとして使用されます。オブジェクト プロパティから文字列 green / red がビューに渡され、ngClass を使用して CSS によって装飾されます。

  decorateDay(day) {

       let dayFormatted = day.date.format("YYYY-MM-DD");

       //when observable was resolved entries is not undefined.
       if (typeof this.entries !== 'undefined') {
           let data = this.entries[dayFormatted];
           if (typeof data !== 'undefined') {
               return data.dayStatus;
           }
       }
   }

ここで私の質問があります。「エントリ」がいつ定義されるかわからないので、未定義の場合はハンドラーをチェックインします。エントリが満たされると、コンポーネントのように見えます(変更検出により) ハンドラーを魔法のように再チェックします。私はそれで大丈夫ですが、コンポーネントのプロパティがいつ変更されたかを確認するより良い方法はありませんか? @resolved またはライフサイクル フックを使用してプロパティを装飾する可能性があります..? 自分のやり方が気に入らない！

あなたの何人かがいくつかの指針を与えることができることを願っています。前もって感謝します！

PS: モデル プロパティとのバインディングはテンプレート自体で行うことができますが、ハンドラーを使用したいのは、将来特定の日をどのように装飾するかについてより柔軟になるからです。

4

1 に答える 1

-1

私はあなたの質問を誤解しているかもしれませんが、これはあなたが探しているもののようです。

ngOnInit() {
    this.calendarService.getAll().subscribe(
        response => {
            this.entries = response.json();
            // >>> here you know that `entries` was updated
            // just invoke what you want to be executed when `entries` has changed
        }
    );
}
于 2016-07-07T10:25:13.393 に答える