Childs of routed Component don't load/render on router.navigate

angular
1

Original GitHub post: https://github.com/Urigo/angular2-meteor/issues/296
I’m posting this to contribute to the community, in case someone runs into this problem some day.

The way I fixed the issue was running the router.navigate inside an angular2 zone, so the code would end up as something like this: (Thanks @tallyb)

import { Component, 
         NgZone } from '@angular/core';
import { Router } from '@angular/router'; 

@Component({ 
  selector: '<my-selector>',
  template: '<button (click)="myFunction();">Navigate</button>'
})

export class MyComponent { 
  constructor(private router: Router, private _ngZone: NgZone) { }
  myFunction() {
    this._ngZone.run(() => {
      // For newer router versions use this.router.navigate(['/dashboard']);
      this.router.navigate(['Dashboard']);
    });
  }
}
1 Like
2

Thanks for that. I am just adding the complete code if anyone needs it:
import { NgZone } from '@angular/core;
import { Router } from '@angular/router';constructor(private router: Router, private _ngZone: NgZone) {`

 }
//in one of your methods: 
this._ngZone.run(() => {
   this.router.navigate(['Dashboard']);
 });
3

Thanks for adding the code correctly, I should have fixed it.

With the new router the navigation parameter should be the route path you have on the RouterConfig, so it’d be something like this.router.navigate(['/dashboard']);

With @angular/router@3.0.0-alpha.6^

4

For other people, check this for explanation and some notes