[Angular] Auxiliary named router outlets

Define a auxilliary router:

export const ROUTES: Routes = [
  {
    path: 'folder/:name',
    component: MailFolderComponent,
    resolve: {
      messages: MailFolderResolver
    }
  },
  {
    path: 'message/:id',
    component: MailViewComponent,
    outlet: 'pane',
    resolve: {
      message: MailViewResvoler
    }
  }
];

 

HTML:

@Component({
  selector: 'mail-app',
  styleUrls: ['mail-app.component.scss'],
  template: `
    <div class="mail">
      <router-outlet
        (activate)="onActivate($event)"
        (deactivate)="onDeactivate($event)"
      ></router-outlet>
    </div>
    <div class="mail">
      <router-outlet
        name="pane"
      ></router-outlet>
    </div>
  `
})

 

Routing by routerLink:

    <a 
      class="mail-item"
      [routerLink]="['', {outlets: {pane: ['message', message.id]}}]"
      routerLinkActive="active">

Clean auxiliary router:

          <a
            [routerLink]="[ { outlets: { primary: 'folder/inbox', pane: null } } ]"
            routerLinkActive="active">
            Inbox
          </a>
          <a
            [routerLink]="[ { outlets: { primary: 'folder/trash', pane: null } } ]"
            routerLinkActive="active">
            Trash
          </a>

 

Routing by JS:

  openMessage(e) {
    e.preventDefault();
    this.router.navigate(['', {outlets: {pane: ['message', this.message.id]}}])
  }

 

RouterLink's advantage: 

Angular will convert routerLink to an 'a' tag, so all the broswer feature for 'a' tag you can get from RouterLink.