なぜangel2オブジェクトはngOnInitでアクセスできないのですか？

Question

私は今Anger2に取り組んでおり、なぜngOnInit()のオブジェクトにアクセスできないのか不思議に思っていましたが、サービスコールでアクセス可能です。 例：

import { Component} from 'angular2/core'; 
import { GlobalService} from './../../app/shared/services/global/global.service'; 
import { GlobalObjectsService} from './../../app/shared/services/global/global.objects.service'; 
import { WorkspaceService } from './../../app/shared/services/pm/workspaces.service'; 
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router'; 
import {ProjectsService} from './../../app/shared/services/pm/projects.service'; 
import {PagesService} from './../../app/shared/services/pm/pages.service'; 
import { WorkspacesComponent} from './../../app/project-manager/workspaces/workspaces.component'; 
import { ProjectsComponent } from './../../app/project-manager/projects/projects.component'; 
import { PagesComponent } from './../../app/project-manager/pages/pages.component'; 

@Component({ 
    selector: 'project-manager', 
    templateUrl: "app/project-manager/project-manager.component.html", 
    providers: [WorkspaceService,ProjectsService,PagesService], 
    directives: [ROUTER_DIRECTIVES,WorkspacesComponent,ProjectsComponent,PagesComponent] 
}) 
export class ProjectManegerComponent { 
    public workspaces: any; 
    public projects: any; 
    public pages: any; 
    baseUrl: string; 

    constructor(private globalService: GlobalService, private globalObjectsService: GlobalObjectsService,private workspaceService: WorkspaceService,private projectsService:ProjectsService,private pagesService:PagesService) { 
     this.baseUrl = this.globalService.getBaseUrl();   
     this.workspaceService.getAllWorkspaces(this.baseUrl) 
     .subscribe((workspaces) => {     
       this.workspaces=workspaces; 
       this.globalObjectsService.selectedWorkspace=workspaces[0]; 
       console.log(this.globalObjectsService.selectedWorkspace);   
       //able to access here      
      } 
     );   
     this.projectsService.getAllprojects(this.baseUrl) 
     .subscribe((projects) => { 
      this.projects = projects;    
      } 
     ); 
     this.pagesService.getAllpages(this.baseUrl) 
     .subscribe((pages) => { 
      this.pages = pages;   
      } 
     ); 
    } 

    ngOnInit() { 
     console.log(this.globalObjectsService.selectedWorkspace); 
     //cannot access here 
    } 
} 

私はこれをngOnInitでどのようにアクセス可能にすることができますか？

Answer 1

this.globalObjectsService.selectedWorkspaceはサブスクライブコールバック内で非同期に設定されているためです。コンポーネントは、ngOnInitフックメソッドを実行する前に、そのコンストラクタでトリガされた非同期処理が完了するのを待機しません。

参照：

this.workspaceService.getAllWorkspaces(this.baseUrl) 
    .subscribe((workspaces) => {     
     this.workspaces=workspaces; 
     this.globalObjectsService.selectedWorkspace=workspaces[0]; //<------ 
    }); 

ngOnInit方法は、 "のみ" のコンポーネントのライフサイクルに参加しています。

編集

あなたはselectedWorkspaceプロパティに基づいて処理をトリガしたい場合は、サブスクライブコールバック内でそれらを実行することができます：

constructor() { 
    this.workspaceService.getAllWorkspaces(this.baseUrl) 
    .subscribe((workspaces) => {     
     this.workspaces=workspaces; 
     this.globalObjectsService.selectedWorkspace=workspaces[0]; 
     this.executeSomething(); //<------ 
    }); 
} 

executeSomething() { 
    console.log(this.globalObjectsService.selectedWorkspace); //<------ 
}