web-dev-qa-db-ja.com

ActivatedRouteSnapshotから完全なURLをエレガントに取得する方法は？

いくつかの私のangularルートガードでは、ログインの成功後にリダイレクトするために「次の」パスを設定したいです。

したがって、通常のガードcanActivate関数のシグネチャは次のようになります。

public canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
  // ...blah
  return true;
}

routeパラメーターは、ActivatedRouteSnapshotのインスタンスです。

以前は、「次の」URLを取得するために、route.url。子ルートがない限り、これは問題なく機能します。

URLの例は/search/advanced?query_hash=1221d3b57f5616ee16ce70fdc78907ab、ここでadvancedはsearchの子ルートです。

子ルートはroute.children、ただし、これらの子を反復処理し（特に複数のレベルがある可能性があります）、このようにURLを結合すると、厄介でandいように見えます。

私が興味を持っているのはroute._routerState.urlプロパティ（下の画像の下部にある文字列）ですが、「プライベート」変数です。

何か不足していますか？ ActivatedRouteSnapshotから完全な（子パスを含む）URLをエレガントに取得するにはどうすればよいですか？ Angularバージョンは5.1です。

enter image description here

angularangular-routingangular-router-guards
10
Radosław Roszkowiak

routerStateSnapshotから取得するには、これを試してください

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      console.log(state.url)
      ...
6
Fateh Mohamed

それを達成するためにAngularルーターからの関数を使用する準備ができていないので、私はそれらを書きました：

function getResolvedUrl(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot
        .map(v => v.url.map(segment => segment.toString()).join('/'))
        .join('/');
}

function getConfiguredUrl(route: ActivatedRouteSnapshot): string {
    return '/' + route.pathFromRoot
        .filter(v => v.routeConfig)
        .map(v => v.routeConfig!.path)
        .join('/');
}

routeがProjectComponentからの場合の出力例：

const routes: Routes = [
    {
        path: 'project', component: ProjectListComponent, children: [
            {path: ':id', component: ProjectComponent}
        ]
    },
];
getResolvedUrl(route) => /project/id1
getConfiguredUrl(route) => /project/:id
13
Marc J. Schmidt