Angular 2 ngOnInit not called
Asked Answered
P

1

37

I am building an Angular 2 app with version beta.8.
In this app i have a component which implements OnInit.
In this component i have the function ngOnInit, but the ngOnInit function is never called.

import { Component, OnInit } from 'angular2/core';

@Component({
  templateUrl: '/app/html/overview.html'
})

export class OverviewComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit');
  }
}

The Routing of the app:

@RouteConfig([
  {
    path: '/overview',
    name: 'Overview',
    component: OverviewComponent
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterComponent,
    useAsDefault: true
  }
])

There is a check to see if the user is already logged in inside the LoginComponent and RegisterComponent.
If the user is logged in, the components redirect to Overview using: router.navigate(['Overview']).
If i use the Overview route as default i do see ngOnInit inside the console.
So the way i redirect my page seems to be the problem.
How can redirect to the Overview page and call the ngOnInit function?

Both the RegisterComponentand the LoginComponent use

ngOnInit() {
  this._browser.getStorageValue('api_key', api_key => {
    if (api_key) {
      this._browser.gotoMain();
    }
  })
}

Browser is a class in which i store browser specific code. This is the gotoMain function:

gotoMain() {
  this._router.navigate([this._browser.main]);
}

this._browser.main is just a string in this case 'Overview'.

Prognathous answered 11/3, 2016 at 9:32 Comment(11)
Have you made sure OverviewComponent works? If yes, Even if you don't import OnInit and implements OnInit, ngOnInit will work.Unjust
@Unjust I added a message: string = 'test' to the OverviewComponent and tried to display it in the view with {{message}} and it worked.Prognathous
Oh ! In that case I need to see your code. Okay. Just try removing what I have suggested and see if works !Unjust
@Günter inside the RegisterComponent and inside the LoginComponent i have a working ngOnInit() in which i check if the user is logged in. If the user is logged in i use this._router.navigate['Overview']Prognathous
That doesn't help much. Where is the code that calls this._router.navigate['Overview']. In the constructor, a callback from a library that communicates to the server, ...?Hate
@Unjust It works if i set Overview as my default route but not if get to overview through router.navigate['Overview'].Prognathous
@Günter this is the inside of the ngOnInit() of my LoginComponent this._browser.getStorageValue('api_key', api_key => { if (api_key) { this._browser.gotoMain(); } })Prognathous
edit your code. show us route.config and as Gunter has said.Unjust
plnkr.co/edit/cPDpUtTpklymlFf7iQhv?p=preview try to play with it if possible.Unjust
N Gunter sorry for not being able to put .. accent in your name through keyboard.Unjust
@Unjust no worries :D We use ue, oe instead of ü, ö on systems where umlauts are not available, but just u, o is fine as well in informal use.Hate
D
75

I guess it's a zone issue.

Inject NgZone (import from angular2/core

constructor(private zone:NgZone) {}

this._browser.getStorageValue('api_key', api_key => {
  if (api_key) {
    this.zone.run(() => this._browser.gotoMain());
  }
})
Diao answered 11/3, 2016 at 9:57 Comment(3)
It works thank you @Günter. what does NgZone do to make this work?Prognathous
Angular runs its code in a patched zone where addEventListener(), setTimeout(), and other async APIs are patched to notify Angular when async action has happened to rerun change detection. This makes change detection quite efficient. When code is called that somehow circuments Angulars zone, Angulars change detection doesn't kick in. If a method (even one from an Angular component or similar) is called from code that was invoked outside Angulars zone, everything runs outside the zone until this event is fully processed. With zone.run(...) you force execution back into Angulars zone.Hate
To get around this for addEventListener(), you can use BrowserDomAdapter and it will do this for you.Joke

© 2022 - 2024 — McMap. All rights reserved.