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

Question

我在 angular2 上工作了一段时间，想知道为什么我无法访问 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 方法 "only" 参与组件生命周期。

编辑

如果你想触发基于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); //<------
}

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

why angular2 object is not accessible in ngOnInit?

typescript

angular

angular2-services