Angular2：サービスの初期化を待つ

Question

サービスが初期化されて他のコンポーネントがロードされるまで待つ方法はありますか？ （データを必要とする）コンポーネントを表示する前にいくつかのデータを同期してロードする必要があり、非同期呼び出しのものを使用したくない（非同期呼び出しのものを使用する）

ngIfは切断していないようです一致しない場合でもコンポーネントのロード）。

私はルータを使用していないので（アプリケーションでは必要ありません）、この場合、@CanActivateは適切ではないと思います。

アイデア？

@Component({ 
    selector: 'my-app', 
    directives: [MyDirective], 
    template: ` 
    <div> 
     <div *ngIf="!initialized">Loading...</div> 
     <div *ngIf="initialized"><myDirective>should wait for service to be initialized</myDirective></div> 
    </div>` 
}) 
export class AppComponent { 
    initialized = false; 

    constructor(_myService: MyService) { 
     this._myService = _myService; 
    } 

    ngOnInit() { 
     this._myService.init() 
      .then(() => { 
       setTimeout(() => this.initialized = true, 2000); 
      } 
     ); 
    } 
} 

Answer 1

私は私が正しく質問を理解してかどうかわからないが、私が得たものから、私はあなたが初期値（プレースホルダ）とモデルのインスタンスを作成し、あなたのコンポーネントがこのモデルで初期化できるようにすることができると思い、データが準備できたら、コンポーネントに反映されるモデルインスタンスの値を変更します。

このようにして、コンポーネントは待たされる必要はなく、コンポーネント内でコーステストを行うことができるプレースホルダデータを使用し、それに応じてテンプレートを表示し、更新すると、子を更新します。

私はこれが助けてくれることを願っています。

Answer 2

あなたはAngularのどのバージョンを使用していますか？編集されたコードをコピーして貼り付けるかどうかはわかりませんが、クラスにimplementsというキーワードがないようです。

*ngIfこの作品はplunkerでうまくいきます。

私が集めたものから、* ngIfのようなものがNg2で適切なやり方です。基本的には、条件が良好な場合にのみコンポーネントを表示します。

コンポーネントは、がインスタンス化されてにインスタンス化されるため、親コンポーネントで必要となるため、不具合に遭遇している可能性があります。

これは、コンポーネント自体（またはテンプレート）がいくつかの値を期待している可能性がありますが、そこにはありません（constructorが壊れている可能性があります）。

angular.ioのLifecycle Hooksページによると、それはまさにOnInitインターフェイスのためのものです。

---

はここで直接plunkerからのコードだ（あなたは、サブコンポーネントになります）：

import {Component, OnInit} from 'angular2/core' 

@Component({ 
    selector: 'sub-component', 
    template: '<p>Subcomponent is alive!</p>' 
}) 
class SubComponent {} 


@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 

     <div *ngIf="initialized"> 
     Initialized 
     <sub-component>Sub</sub-component> 
     </div> 
     <div *ngIf="!initialized">Not initialized</div> 
    </div> 
    `, 
    directives: [SubComponent] 
}) 
export class App implements OnInit { 
    initialized = false; 
    constructor() { 
    this.name = 'Angular2' 

    } 
    ngOnInit() { 

    setTimeout(() => { 
     this.initialized = true; 
    }, 2000) 
    } 
}