Angular: AppRoutingModuleでルーティング


前提


ドキュメント


ルーティング

URL(example.com/パス)のパスに応じて、コンポーネントを表示する。

準備

<base href="/">

<router-outlet></router-outlet>


ルーティングモジュールの作成: ng generate module

慣例でAppRoutingModuleという名前で作る。

# --module=app: AppRoutingModuleをAppModuleでインポート(importsの配列)
# --flat: src/app/直下に作成
ng generate module app-routing --flat --module=app --project=myproject

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: '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: コンポーネントクラス },


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

ActivatedRouteparamMap.get()を使う

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

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