ルーティング: AppRoutingModule


前提


ルーティング

準備

<base href="/">

<router-outlet></router-outlet>

例: AppComponent
<app-header></app-header> <!-- 固定のヘッダ -->
<router-outlet></router-outlet> <!-- ルートに応じて変わる -->
<app-footer></app-footer> <!-- 固定のフッタ -->

ルーティングモジュールを作成

name=app-routing
module=app

ng generate module $name --project=$PROJECT --flat --module=$module

AppRoutingModuleを編集

import { NgModule } from '@angular/core'
// ルーティングに必要なモジュール
import { RouterModule, Routes } from '@angular/router'

// ルーティングの対象のコンポーネント
import { NewPageComponent } from './new-page/new-page.component'

// パスとコンポーネントのマッピング
const routes: Routes = [
  { path: 'path', component: NewPageComponent },
]

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { } // 中身なし

routes配列

パスとコンポーネントのマッピング(オブジェクト)を追加していく

{ path: 'パス', component: コンポーネントクラス },

前方一致: pathMatch: 'prefix'

完全一致: pathMatch: 'full'

{ path: 'パス', component: コンポーネントクラス, pathMatch: 'full' },

先にマッチしたもの優先

{ path: 'ab', component: コンポーネントX },
{ path: 'abc', component: コンポーネントY },

ルート/へのパス

{ path: '', component: コンポーネントクラス, pathMatch: 'full' },

リダイレクト: redirectTo

{ path: '', redirectTo: '/home', pathMatch: 'full' },

ワイルドカード

// ラスト要素
{ path: '**', component: PageNotFound404Component },

パラメータ

{ path: 'user/:id', component: コンポーネントクラス },


routerLinkディレクティブ

例: app.compoenent.html

<a routerLink="/パス">リンク</a>
<button routerLink="/パス">ボタン</button>

<!-- routerLinkをクリックでrouter-outletにコンポーネントが表示される -->
<router-outlet></router-outlet>

パラメータの参照: Observableを使わないケース

ActivatedRouteparamMap.get()を使う

// インポート
import { ActivatedRoute } from '@angular/router'
  // コンストラクタに入れる
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // パラメータ取得
    let id = this.route.snapshot.paramMap.get('id')
  }