Angular のルーティングの基本とRoutes の使い方
Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。
ルーティングを実現させるには、RoutesとRouterModuleをインポートする必要があります。
ルーティングは複数個所存在する可能性があるため、モジュールとしてファイルを作成したほうが良いと思います。
app.route.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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(ルートモジュール)
1 2 3 4 5 6 |
import { AppRouteModule } from './app.route.module'; // 省略 imports: [ AppRouteModule // 追加 ], // 省略 |
Router.navigateメソッドを使用する
テンプレート(ビュー)には以下のように記述してルータによる描画領域を定義します。
1 |
<router-outlet></router-outlet> |
上記で問題ないのですが、描画領域が複数存在する場合は区別をつけるために名前付きoutletを設定します。具体的にはname属性を追加するだけです。
1 |
<router-outlet name='aaa'></router-outlet> |
基本的には名前付きoutletを使用しておいたほうが良いと思います。
描画領域をルータ経由で表示、非表示してみます。navigateメソッドで実現します。
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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にした例です。
1 2 3 4 5 6 |
onClick1() { this.router.navigate([ { outlets: {'aaa': 'disp'} } ],{skipLocationChange: true}); } onClick2() { this.router.navigate([ { outlets: {'aaa': null}} ],{skipLocationChange: true}); } |
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^