Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティングpath設定時にはredirectToで転送用のアドレスが設定できたり、:idといった形でパラメーターの設定ができます。

import { RouterModule }   from '@angular/router';
  
@NgModule({
  ...
  imports: [
    RouterModule.forRoot([
      {
        path: '', 
        redirectTo: '/dashboard', 
        pathMatch: 'full'
      },
      {
        path: 'list',
        component: ListComponent
      },
      {
        path: 'detail/:id',
        component: DetailComponent
      }
    ])
  ]
  ...
});

値の受取は@angular/routerよりParamsをinportしておくとthis.route.paramsよりRxJSで取得ができる。

import { Component, Input ,OnInit} from '@angular/core';
import { ActivatedRoute, Params }   from '@angular/router';
 
export class HeroDetailComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
  ) {}
  
  ngOnInit(): void {
    this.route.params
      .subscribe((params: Params) => {
        console.log(params);//{id:"13"}
      });
  }
}

詳細へのリンクは[routerLink]="['/detail', hero.id]と言った形で設定する

  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>

参考:Routing - ts - TUTORIAL