CODEWITHSUNDEEP
typescriptangularangular2-services
Bhushan Gadekar
Bhushan Gadekar

Reputation: 13805

why angular2 object is not accessible in ngOnInit?

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?

Upvotes: 1

Views: 998

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202176

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); //<------
}

Upvotes: 3

Related Questions