Angular2のRouting

app.module.ts内などでRouterModuleを読み込み@NgModuleでimportsでルーティング設定を行います。

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

app.components.ts内の@Componentではrouter-outletタグで@NgModuleのpathがあった場合にcomponentがouter-outletタグに指定したコンポーネントが表示されます。

@Component({
  selector: 'my-app',
  template: `
   <h1>{{title}}</h1>
   <router-outlet></router-outlet>
  `
});