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

2018/6/1 Angular

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

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

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

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

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{}

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 // 追加
],
// 省略

import { AppRouteModule } from './app.route.module';

// 省略

imports: [

AppRouteModule // 追加

// 省略

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

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

<router-outlet></router-outlet>

1	<router-outlet></router-outlet>

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

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

1	<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}} ]);
  }
}

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}} ]);

}

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

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

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

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

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