Angular Routerの手引き書

導入

yarn add @angular/router

import { RouterModule } from '@angular/router' # Angular Router

前提

import { ActivatedRoute, Router } from "@angular/router";

export class Component {
  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router,
  ) {}
}

画面遷移

JavaScriptから遷移する方法。

this.router.navigate(["/path", id]); // /path/:id
// URLだけ書き換える
this.router.navigate(["/path"], { replaceUrl: true });

HTMLから遷移する方法。

div([routerLink]="['/path']") // /path
div([routerLink]="['/path', id]") // /path/:id

ルーティングの設定

表示させる箇所を決める。

router-outlet

URLを設定する。

const routes: Routes = [{
  path: 'path/:id',
  component: OyaComponent,
  children: [{
    path: '',
      component: KoComponent
    }]
}]

@NgModule({
  imports: [
    RouterModule.forChild(routes),

URLを扱う

// パラメーターの初期値
this.route.snapshot.paramMap.get("id");

URLを生成する

UrlTreeを作成。

this.router.createUrlTree(["path/path", id], {
  queryParams: {
    page: 1,
  },
});

UrlTreeから文字列への変換。

this.router.serializeUrl(this.router.createUrlTree([]));

マッチングを工夫する

UrlMatcherを作成

コンポーネントの再利用を制御

Router.routeReuseStrategy.shouldReuseRoute = () => falseにする。

注意、この処理が1回でも走るとその後再利用されなくなるのでもとに戻す。

Angular - BaseRouteReuseStrategy

同じ画面に遷移したときに画面リロードするように

RouterConfigOptionsをonSameUrlNavigation: 'reload'にする。

Angular - RouterConfigOptions

その他の記事

公開日 2022/07/23

Thanks you for reading.