Angular のルーティング定義を全て取得してパスの存在チェックをしてみる
Angular アプリを作っていて、ルーティング定義をまとめて知りたくなったので、調べ方を調べた。
@angular/router
が提供する Router クラスより、config
を参照すれば、全てのルーティング定義が見られることが分かったので、ココから path
情報を取得すれば、アプリ内の全ルーティング ≒ 全ページの URL が調べられる。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
/**
* コンストラクタ
*
* @param router Router
*/
constructor(private router: Router) { }
/** 初期表示時の処理 */
public ngOnInit(): void {
// 全パスを取得する : ルートを指定するため router.config に '/' を指定する
const paths: string[] = this.getRoutes(this.router.config, '/');
// コンソール出力する
console.log(paths);
}
/**
* ルーティング定義からパスを取得する
*
* @param routes ルーティング定義の配列
* @param parentPath 第1引数 routes までのパス
* @return ルーティングのパスの配列
*/
public getRoutes(routes: any[], parentPath: string): string[] {
const paths = [];
routes.forEach((route) => {
const path = `${parentPath}${route.path}/`;
// 子のルーティング定義があれば再帰呼び出しして分割代入する
if(route.children) {
paths.push(...this.outputRoute(route.children, path));
}
// 空文字のパスは大抵 redirectTo を設定しているモノなので無視する
if(route.path === '') {
return;
}
// console.log(path);
paths.push(path);
});
return paths;
}
}
拙作の Angular Utilities からルーティング定義を引っ張り出してみたところ、以下のようになった。
0: "/index/"
1: "/font-family-tester/"
2: "/csv-file-to-table/"
3: "/touch-friendly-dnd/"
4: "/multiple-diff/"
5: "/text-converter/add-line-number/"
6: "/text-converter/case-converter/"
7: "/text-converter/normalize-to-nfc/"
8: "/text-converter/"
9: "/dynamic-generate-form/"
10: "/calculator/"
11: "/beautifier/javascript/"
12: "/beautifier/html/"
13: "/beautifier/css/"
14: "/beautifier/"
15: "/regexp/"
16: "/colour-converter/colour-converter/"
17: "/colour-converter/"
18: "/epoch-time-converter/"
19: "/encoder-decoder/"
20: "/detect-character/"
21: "/date-time-countdown/"
22: "/draw-triangle-svg/"
23: "/guitar-scale-generator/"
コレで求めていたモノは拾えた。
パスの存在チェックとかがしたければ、この配列から filter()
とかすれば良いだろう。