web-dev-qa-db-ja.com

Angular2ルーター、URLからルートデータを取得し、パンくずリストを表示する

angular2 router を使用しています。

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に関連付けられたルートデータを取得する方法？

angularangular2-routingangular2-router
22
ATX

これまでのところ、最も実行可能なソリューションは（完了）です。

  • ルートをエクスポート/インポート可能にする
  • Router.eventsサブスクライブから現在のURL更新を取得します
  • URLの変更時に、ルートのパスをループし、パターンがURLと一致するかどうかを確認します
  • パターンがURLに一致する場合、一致するルートからデータを取得します

長所：作品

短所：ng2ルーターを使用せずに手動でURLルート認識をやり直す

2
ATX

RC5用に更新

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

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

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

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

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 も参照してください。

23
Mark Rajcok

ブレッドクラムソリューションはすべて処理する必要があります-

  1. アプリケーションルーティングでパンくずリストを定義する宣言的アプローチ。
  2. サーバー応答からのラベルで任意のルートを更新する動的非同期方法。
  3. 特定のルートをスキップしてパンくずリストに表示する方法。

Angularライブラリを作成し、これらすべてを処理し、xng-breadcrumbs- https：/ /github.com/udayvunnam/xng-breadcrumb

Angularパンくずリストの使用方法を示すアプリを開発しました- https://xng-breadcrumb.netlify.com

角度ライブラリの計画、作成、および継続的なリリースは適切です この中記事に記載されています

0
Uday Vunnam