22

angular2 ルーターを使用しています。

URL のブレッドクラムを描画するには、site.com/a/b/c/15 とします。次のようにします。

  1. ルートを取得し、ルートにsite.com/a/b/c/15関連付けられたきれいな名前を取得します
  2. ルートを取得し、ルートにsite.com/a/b/c関連付けられたきれいな名前を取得します
  3. ルートを取得し、ルートにsite.com/a/b関連付けられたきれいな名前を取得します
  4. ルートを取得し、ルートにsite.com/a関連付けられたきれいな名前を取得します

したがって、次のルートがあるとしましょう。

{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},

私のプロセスの結果は、現在のルートを説明{"I am C", "I am B", "I am C"}する素敵なブレッドクラムを表示できるおかげで、配列を含むことになります。"I am A > I am B > I am C"

これは、非推奨のルーターで動作するために使用されます

this.router.recognize(url).then((instruction) => {
    instruction.component.routeData.get('prettyName') // Would return 'I am ..'

しかし今; 最後のルーターでは、この認識ロジックを処理できなくなりました。

URL に関連付けられたルート データを取得する方法は?

4

3 に答える 3

24

RC5 用に更新

現在の URL から開始して URL からルートを取得しようとする代わりに、アクティブ化されたすべてのルート (プライマリ アウトレットに関連付けられている) を から取得できますRouterState。

ナビゲーション ライフサイクルが成功するたびに、ルータは のツリーを構築しActivatedRouteます。これにより、ルータの現在の状態が構成されます。サービスとプロパティRouterStateを使用して、アプリケーションのどこからでもcurrent にアクセスできます。RouterrouterState

ルーターの状態は、親、子、および兄弟ルートから必要な情報を取得するために、アクティブ化されたルートからルート ツリーを上下にトラバースするメソッドを提供します。--参照

ルーター イベントをサブスクライブし、各イベントの後、からNavigationEndのツリーをたどります。ActivatedRouteroot

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'breadcrumbs',
  template: `
  <div>
    breadcrumbs: 
    <span *ngFor="let breadcrumb of breadcrumbs; let last = last">
      <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
      <span *ngIf="!last">></span>
    </span>
  </div>`
})
export class BreadcrumbsComponent {
  breadcrumbs: Array<Object>;
  constructor(private router:Router, private route:ActivatedRoute) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {  // note, we don't use event
        this.breadcrumbs = [];
        let currentRoute = this.route.root,
            url = '';
        do {
          let childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(route => {
            if(route.outlet === 'primary') {
              let routeSnapshot = route.snapshot;
              console.log('snapshot:', routeSnapshot)
              url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
              this.breadcrumbs.push({ 
                label: route.snapshot.data.breadcrumb,
                url:   url });
              currentRoute = route;
            }
          })
        } while(currentRoute);
      })
  }
}

ルートは次のようになります。

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

Plunker- RC.5、ルーター 3.0.0-rc.1

同様のソリューションについては、https://stackoverflow.com/a/38310404/215945も参照してください。

于 2016-08-06T21:09:48.963 に答える