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}} ]);
}
}
表示させると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;
routerLinkディレクティブを使用する
Aタグでリンク作成してルーティングするにはrouterLinkディレクティブを使用します。
<a [routerLink]="['/details']">xxx</a>
リンクをクリックすると関連するコンポーネントが<router-outlet>にレンダリングされます。
URLを変更しないようにするためには[skipLocationChange]="true"を追記します。
<a [routerLink]="['/details']" [skipLocationChange]="true">xxx</a>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
