0

重度のコンポーネント ページ (30 以上のコンポーネントをロード) にコンポーネントを最初にロードしたときにのみ発生するように見える奇妙なケースに遭遇しています。

@Component{
    selector: <parent-component>
    template: `<child-component [myObject]=myObject>
}
export class ParentComponent { 
    private myObject:DTOValue;
    constructor(service:MyService){
        service.getDTOValue().subscribe((dtoValue:DTOValue) => {
            this.myObject = dtoValue;
        });
    }
}

@Component{
    selector: <child-component>
    template: `<div></div>
}
export class ChildComponent { 
    @Input set myObject(value:DTOValue) => {//do something};
    constructor(){
    }
}

このコードでは、親は入力として子への値を取得します。この値は後で要求から取得されるため、子が最初に初期化されるとき、入力は未定義になる可能性があります。値がリクエストから返されて variablemyObjectに設定されると、子コンポーネントがトリガーされた入力イベントを受け取ることが期待されます。ただし、タイミングの関係で、特に多くのファイルが読み込まれているページを最初に読み込むときは、常にそうであるとは限りません。

子コンポーネントが入力を受信しない場合、ページの他の場所をクリックすると、変更検出がトリガーされ、入力値が取得されるようになります。

私が考えることができる2つの可能な解決策は、いくつかの大きなコード変更を必要とするので、それらを実装する前に今すぐ選択することを確認したい.

  1. 入力をサブジェクトに変更して、正しいイベントが確実にトリガーされるように入力値をプッシュします (これはやり過ぎのようです)。

  2. 動的ローダーを使用して、リクエストが正しい値で返されたときにコンポーネントをロードします（これもやり過ぎのようです）。

更新: plnker の追加: http://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb、ここで、タイトルにデータ バインディングが適用されないように見えることがわかります。

任意の提案をいただければ幸いです。

ありがとう！

4

2 に答える 2

1

問題がどこにあり、それを解決できる適切なライフサイクル フックを特定できる場合は、ChangeDetectorRefを使用して Angular に知らせることができます。

constructor(private _ref: ChangeDetectorRef)

method_where_changes_are_overlooked() {
  do_something();
  // tell angular to force change detection
  this._ref.markForCheck();
}

ルーターでのみ同様の問題がありました-APIサーバーがオフラインになった場合/場合にリダイレクトする必要がありました。routerOnActivate()チェックマークを付けて解決しました...

この方法で変更検出をトリガーすると、このコンポーネントからアプリ ルートへのコンポーネント ツリーの「ブランチ」が変更検出用にマークされます。この主題についてのビクター・サフキンによるこの講演を見ることができます...

于 2016-02-18T20:29:41.190 に答える
0

申し訳ありませんが、問題は jQuery とのやり取りにありました。コンポーネントをロードするイベントを jQuery コード内でトリガーしたときに、ライフサイクルがトリガーされませんでした。修正は、コードがロードされて変更検出が呼び出された後でした。

于 2016-02-20T00:44:43.560 に答える