角2 - コンストラクタ呼び出し後のライフサイクルイベント

Question

私はAngular 2で簡単な作業をしようとしています。

コンポーネントのコンストラクタの呼び出しが完了した後にイベントを捕捉したいと思います。 私はそうthis-

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Profile } from '../../dataModel/Profile.ts'; //Data Model 

@Component({ 
    selector: 'profile-list', 
    template: require('./profileList.component.html'), 
    styles: [require('./profileList.component.css')] 
}) 

export class ProfileListComponent 
{ 
    public profiles: Profile[];   //Can be accessed in view 
    public loadingMessage: string = "Loading Data .."; 

    constructor(http: Http) 
    { 
     http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result => 
     { 
      this.profiles = result.json(); 
      console.log(result); 
     }); 
    } 

    ngOnInit() 
    { 
     this.loadingMessage = "No Data Found !!!"; 
    } 
} 

のようにコンストラクタでのネットワーク呼び出しを作っていますコンストラクタ呼び出しが終了したとき、私はわかりません。

コンストラクタ呼び出しが完了したときにイベントを捕捉したいと思います。

この2 links-

1. http://learnangular2.com/lifecycle/

2. http://learnangular2.com/lifecycle/

から私は、そうthis-

export class App implements OnInit{ 
    constructor(){ 
    //called first time before the ngOnInit() 
    } 

    ngOnInit(){ 
    //called after the constructor and called after the first ngOnChanges() 
    } 
} 

を知るようになりました私のconstructor呼び出しが終了した後にonInitが呼ばれるのは正しいですか？

私を助けてください。

ご協力いただきありがとうございます。

Answer 1

ルーターを使って定義されたコンポーネントをレンダリングすると、これはあなたの解決策になりますか？ https://angular.io/docs/ts/latest/guide/router.html#!#guards

ルーター機能を使用して、コンポーネントを初期化する前にデータをプリフェッチできます。

現在のところ、任意のユーザーがいつでもアプリケーション内のどこにでも移動できます。

これは必ずしも正しいことではありません。

• おそらく、ユーザーにはターゲットコンポーネントに移動する権限がありません。
• おそらく、ユーザーはまずログイン（認証）する必要があります。
• ターゲットコンポーネントを表示する前にデータを取得する必要があります。
• コンポーネントを終了する前に保留中の変更を保存することができます。
• 保留中の変更を保存せずに破棄しても問題ないかどうかをユーザーに確認することがあります。

import { Injectable }    from '@angular/core'; 
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router'; 

@Injectable() 
export class ComponentRouteResolve implements Resolve<ComponentName> { 
    constructor(private router: Router) {} 
    resolve(route: ActivatedRouteSnapshot): Promise<boolean>|boolean { 
    return this.myService().then(data => { 
     return true; 
    }); 
    } 
} 

Answer 2

Service documentationに従って、ngOnInitの中でサービスを受けることをお勧めします。 this documentationですべてのライフサイクルフックを確認し、そのOnInitdocumentationごとに次の2つの主な理由ngOnInitを使用する必要があります。

1. はまもなく建設
2. 後に複雑な初期化を実行するためにコンポーネントを設定する角度は、入力プロパティを設定した後

だからあなたの構成要素は以下のようにのようにする必要があります：

export class ProfileListComponent 
{ 
    public profiles: Profile[];   //Can be accessed in view 
    public loadingMessage: string = "Loading Data .."; 

    constructor(private http: Http) {   
    } 

    ngOnInit() 
    { 
     this.http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result => 
     { 
      this.profiles = result.json(); 
      console.log(result); 
     });   
    } 
} 

Answer 3

あなたはデータがロードに利用できるようにしたい場合は、負荷をHTTPとあなたのコンポーネントが含まれているルートがロードされる前にペイロードを返すことができ、ルート内のデータを解決するにはさらに検討する必要があります。