7

ルーターからのrouterLinkいくつかに基づいてを表示/非表示にしたい。Dataディレクティブは完了しましたが、最も重要な部分が欠けています...

たとえば、次のルーター構成があります (コンポーネントは省略されています)。

[
  { path: '', children: [
    { path: 'foo', children: [
      { path: 'bar', data: { requiredPermissions: ['a', 'b'] } }
    ]}
  ]},
  { path: 'baz', data: { requiredPermissions: ['c'] }, children: [
    { path: ':id' }
  ]}
]

がまたはの場合に使用されるRouterをに尋ねたいと思います。RouterouterLink/foo/bar/baz/123

Routerソース コード ( https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router.ts )を調べましたが、これを行う簡単な方法が見つかりませんでした。特に、これらの:id変数をどのように処理するか。

もちろん、 を反復してRouter.config、さらに深くすることもできます。しかし、その後、それらの変数、正規表現などを解析する必要があります。Angular ルーターも内部でこれらすべてを行う必要があるため、もっと簡単な方法があるはずです。

アイデア/解決策はありますか？

4

2 に答える 2

0

router.navigateByUrlを起動し、イベントを待ち、ナビゲーションをキャンセルできますRouteRecognized(たとえば、カスタム Guard を使用)。RouteRecognized必要な情報がすべて含まれます。明らかにそれは悪い解決策です。

別のアプローチがあり、パスとデータを含む必要がある追加の構造 (一種のマップ) を作成できます。たとえば、構造には path struct.baz-route={url:'baz/:id', perm: ['c']}、 then [routerLink]="struct.baz-route.url.replace(':id', x)"、 thenがあり*ngIf="struct.baz-url.perm.indexOf('c')>-1"ます。

于 2016-12-24T22:28:28.693 に答える
-1

現在のルートからのデータが必要な場合は、このようにして取得できます

import {ActivatedRoute} from '@angular/router';

export class Component {

   constructor(private route: ActivatedRoute){
          let pathroots = this.route.pathFromRoot;
          let pathurl = '';
          pathroots.forEach(path => {

              path.url.subscribe(url => {
                   url.forEach(e => {
                      pathurl += e + '/';
                   });
              });


         });
         console.log(pathurl,'*******************');
       }

 }
于 2016-12-26T13:09:20.753 に答える