Angular[メモ] ActivatedRouteで現在のpathを取得

angularでActivatedRoute のメモ。

すぐに値が欲しい場合は snapshot からとる。

ActivatedRouteで取れる値の型(下記)を見てみると、一部をのぞいて返り値が Observable です。(つまり非同期)

なので、コンポーネントの初期化のタイミングで1度だけ、何か値を取ってきて判定させたいようなときには基本、snapshotを使うことになりそうです。

(コンポーネントは変わらずにルーティングが変わる可能性のある場合(ヘッダーなどの共通コンポーネントなど)はsnapshotではなく、各Obervableを subscribe した方が良さそう)

router_state.d.ts

export declare class ActivatedRoute {
    /** An observable of the URL segments matched by this route */
    url: Observable<UrlSegment[]>;
    /** An observable of the matrix parameters scoped to this route */
    params: Observable<Params>;
    /** An observable of the query parameters shared by all the routes */
    queryParams: Observable<Params>;
    /** An observable of the URL fragment shared by all the routes */
    fragment: Observable<string>;
    /** An observable of the static and resolved data of this route. */
    data: Observable<Data>;
    /** The outlet name of the route. It's a constant */
    outlet: string;
    /** The component of the route. It's a constant */
    component: Type<any> | string | null;
    /** The current snapshot of this route */
    snapshot: ActivatedRouteSnapshot;
    /** The configuration used to match this route */
    readonly routeConfig: Route | null;
    /** The root of the router state */
    readonly root: ActivatedRoute;
    /** The parent of this route in the router state tree */
    readonly parent: ActivatedRoute | null;
    /** The first child of this route in the router state tree */
    readonly firstChild: ActivatedRoute | null;
    /** The children of this route in the router state tree */
    readonly children: ActivatedRoute[];
    /** The path from the root of the router state tree to this route */
    readonly pathFromRoot: ActivatedRoute[];
    readonly paramMap: Observable<ParamMap>;
    readonly queryParamMap: Observable<ParamMap>;
    toString(): string;
}

Componentの初期化のタイミングでパスパラメーターを取ってくるとき

// --------------------------------------
// idというpath paramをとって判定する
constructor(private activatedRoute: ActivatedRoute){
}

ngOninit(){
 const { snapshot } = this.activatedRoute;
// snapshotを参照する
 if (!snapshot.params.id) {
     // idがなかった場合の処理
     // console.log('id is none);
    } else {
    // idがあった場合の処理
    console.log(snapshot.params.id);  
    }
}

現在のルーティングのpathを取得する

import * as _ from 'lodash';

// activatedRouteからpath(配列)を取り出す
const path:string[] =  _.map(this.activatedRoute.snapshot.pathFromRoot, (ars: ActivatedRouteSnapshot) => {
 if (_.isNil(ars.url) || _.isEmpty(ars.url)) {
  return null;
 }
 return (_.first(ars.url) as UrlSegment).path as string;
}).filter(val => val);

// localhost:8080/hoge/fugaの場合
// console.log(path);  // -> [ 'hoge','fuga']