はじめに
Angularでは、Routeという個々のルートを定義するオブジェクトがあり、そこにユーザーが追加定義できるdataというプロパティがあります。これを使って、ActivatedRouteを介してコンポーネントに何らかのデータを渡すことができます。
環境
Angular 9.1.7
1.特定のパスにデータを持たせる
ルーティングを設定するモジュールでRouteオブジェクトにdataというプロパティを持たせます。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'notes',
// dataを追加
data: {
showFooter: false,
},
loadChildren: () =>
import('./notes/notes.module').then((m) => m.NotesModule),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
2.ActivatedRouteを使ってコンポーネントにデータを渡す
RouterのイベントをforEachで回し、ActivatedRouteのプロパティのfirstChildにあるdata、つまり現在表示されているコンポーネントのRouteオブジェクトのdataプロパティを読み取ります。
app.component.ts
export class AppComponent {
showFooter: boolean;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute
) {
this.router.events.forEach(event => {
// routerイベントのNavigationEndの時に
if ((event instanceof NavigationEnd)) {
// アクティブなrouteをsnapshotで静的な状態として取得、routeの一階層下firstChildを指定
this.showFooter =
// false以外ならtrueにする
this.route.snapshot.firstChild.data.showFooter !== false;
}
});
}
}
以上でコンポーネントにRouteのdataを渡すことができました。
使用例：ヘッダーやフッターを非表示にしたい時
- 最上層のAppModuleでヘッダーやフッターを読み込んでおり、特定のモジュールで非表示にしたい場合、data内のプロパティを使うことで切り替え、非表示にすることができます。
app.component.html
<app-footer *ngIf="showFooter"></app-footer>