为什么在ngOnInit中无法访问angular2对象？

Question

I am working on angular2 quite a while a now and was wondering why i am not able to access the objects in ngOnInit() but they are accessible in the service call. For ex.

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
    }   
}

So I am curious to know how can I make this accessible in ngOnInit?

Answer 1

It's because this.globalObjectsService.selectedWorkspace is set asynchronously within the subscribe callback. The component doesn't wait for asynchronous processing triggered in its constructor to be complete before executing the ngOnInit hook method.

See:

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

The ngOnInit method "only" takes part in the component lifecycle.

Edit

If you want to trigger processing based on the selectedWorkspace property, you could execute them within the subscribe callback:

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

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