Angular のルーティングの基本とRoutes の使い方

2018.06.01

Angular のルーティングの基本とRoutes の使い方

Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。

ルーティングを実現させるには、RoutesとRouterModuleをインポートする必要があります。

import { Routes, RouterModule } from '@angular/router';

ルーティングは複数個所存在する可能性があるため、モジュールとしてファイルを作成したほうが良いと思います。

app.route.module.ts

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; 
import { AbcComponent } from './abc/abc.component';
const routes: Routes = [
  {path:'', component: AppComponent},
  {path:'disp', component: AbcComponent, outlet: 'aaa'} // 複数あればカンマ区切りで定義していく
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRouteModule{}

上記は、定義の順番が関係あり、上から順にpathがmatchするコンポーネントが使用されます。本来は、ルーティングで利用するコンポーネントはdeclarationsで指定しますが、上記のように別ファイルでモジュールにしておくと、ルートモジュールが簡潔に書けるため良いと思います。

app.module.ts（ルートモジュール）

import { AppRouteModule } from './app.route.module';
// 省略
imports: [
  AppRouteModule // 追加
],
// 省略

Router.navigateメソッドを使用する

テンプレート（ビュー）には以下のようにrouter-outletタグを記述してルータによる描画領域を定義します。

<router-outlet></router-outlet>

上記で問題ないのですが、描画領域が複数存在する場合は区別をつけるために名前付きoutletを設定します。具体的にはname属性を追加するだけです。

<router-outlet name='aaa'></router-outlet>

基本的には名前付きoutletを使用しておいたほうが良いと思います。

描画領域をルータ経由で表示、非表示してみます。navigateメソッドで実現します。

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template:
  `
  <button (click)='onClick1()'>表示ボタン</button>
  <br>
  <button (click)='onClick2()'>非表示ボタン</button>
  <br>
  <div>
    <router-outlet name='aaa'></router-outlet>
  </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router){}

  onClick1() { // name属性で指定した値とキーをマッピングし、pathで指定した値とoutletsの値をマッピングする
    this.router.navigate([ { outlets: {'aaa': 'disp'}}]);
  }
  onClick2() { // nullにすることで非表示にする
    this.router.navigate([ { outlets: {'aaa': null}} ]);
  }
}

Angular のルーティングの基本とRoutes の使い方

表示させるとURLが変わってしまいます。

URLを変更しないように設定する(skipLocationChange)

ルーティング機能を使ってもURLを変更させないようにしたい場合、skipLocationChangeをtrueにすることで変更させないようにすることができます。

以下、skipLocationChangeをtrueにした例です。

onClick1() {
  this.router.navigate([ { outlets: {'aaa': 'disp'} } ],{skipLocationChange: true});
}
onClick2() {
  this.router.navigate([ { outlets: {'aaa': null}} ],{skipLocationChange: true});
}

RouterModule.forRootを使わない記述方法(standalone)

v14.2以降、provideRouterでルーティング設定を行えるようになっています。

各コンポーネントのstandaloneはtrueにしておく必要があります。

import { provideRouter } from '@angular/router'

bootstrapApplication関数のproviders配列に要素を追加します。

import { bootstrapApplication,provideProtractorTestingSupport } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import routeConfig from './app/routes'; // ★ routes.tsファイル追加

bootstrapApplication(AppComponent,
    {
      providers: [
        provideProtractorTestingSupport(),
        provideRouter(routeConfig) // ★ 追加
      ]
    }
).catch(err => console.error(err));

routes.ts(サンプル)

import { Routes } from '@angular/router';
import { AppComponent } from './app.component'; 
import { AbcComponent } from './abc/abc.component';
const routeConfig: Routes = [
  {
    path: '',
    component: AppComponent,
    title: 'Home page'
  },
  {
    path: 'details/:id',
    component: AbcComponent,
    title: 'Home details'
  }
];

export default routeConfig;
What is new in Angular v14 - A Game Changer | Academy | Lucas Paganini
Discover what is new in Angular 14
www.lucaspaganini.com

routerLinkディレクティブを使用する

Aタグでリンク作成してルーティングするにはrouterLinkディレクティブを使用します。

<a [routerLink]="['/details']">xxx</a>

リンクをクリックすると関連するコンポーネントが<router-outlet>にレンダリングされます。

URLを変更しないようにするためには[skipLocationChange]="true"を追記します。

<a [routerLink]="['/details']" [skipLocationChange]="true">xxx</a>
タイトルとURLをコピーしました