Navigation

So at this point the router has created a router state and instantiated the components. Next, we need to be able to navigate from this router state to another one. There are two ways to accomplish this: imperatively, by calling router.navigate, or declaratively, by using the RouterLink directive.

Imperative navigation

To navigate imperatively, inject the Router service and call navigate:

@Component({...})
class MessageCmp {
  public id: string;
  constructor(private route: ActivatedRoute, private router: Router) {
    route.params.subscribe(_ => this.id = _.id);
  }

  openPopup(e) {
    this.router.navigate([{outlets: {popup: ['message',          
    this.id]}}]).then(_ => {
      // navigation is done
    });
  }
}

RouterLink

Another way to navigate around is by using the RouterLink directive:

@Component({
  template: `
    <a [routerLink]="['/', {outlets: {popup: ['message',        
    this.id]}}]">Edit</a>
  `
})
class MessageCmp {
  public id: string;
  constructor(private route: ActivatedRoute) {
    route.params.subscribe(_ => this.id = _.id);
  }
}

This directive will also update the href attribute when applied to an <a> link element, so it is SEO friendly and the right-click open-in-new-browser-tab behavior we expect from regular links will work.