バインディングテンプレートの角の前の遅延

Question

これは、再度ExpressionChangedAfterItHasBeenCheckedErrorに関連しています。

私の状況では、私はajax呼び出しから回復するパラメータ 'data'を持っています。 このデータは、@inputディレクティブを使用して子を作成するために使用されます。私はバインディングがデータが定義されている場合にのみ発生することを望みます。それが動作する方法は、角度は、私は理由を理解ExpressionChangedAfterItHasBeenCheckedErrorを、表示されますが、行われるコールバックとデータを待つために、角依頼する方法をので、私は

export class UserComponent{ 
    data: any 


    constructor(
     private userService: UserService){ 
      this.userService.getUser() 
      .subscribe(result => { 
       this.data = result; 
      } 
     } 
    ); 
} 

角度であることを行うにはどのよう見当がつかないto be！=バインディングを開始する前に未定義からのものですが、目標はデータベースからの実際の値で初期化された子を持つことです。

"実際の"データをバインドする前にサイクルの終了を待つ必要がある場合は、このエラーが発生しないようにしてください（そして、setTimeoutを使用しないでください）。

おかげ

<!--the template if it matter --><somechildtag [data]="data" ></somechildtag> 

Answer 1

はng-containerを使用してコンポーネントをロードします。例えば

：あなたのdataオブジェクトががを移入された場合にのみ

<div *ngIf="data?.length > 0"> 
     <ng-container *ngComponentOutlet="myChildComponent; 
       ngModuleFactory: childComponentsModule;"></ng-container> 
    </div> 

だから、あなたはあなたの子供をレンダリングします。あなたのコンポーネントで

：

private childComponentsModule: NgModuleFactory<any>; 

constructor(private compiler: Compiler){ 
    this.childComponentsModule = compiler.compileModuleSync(ChildComponentsModule); 
} 

あなたがここに動的にコンポーネントをロードする方法のより詳細な例を見ることができます：

Angular2: Use Pipe to render templates dynamically

角度のマニュアル：

https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html