web-dev-qa-db-ja.com

Angular 2、現在のルート名を表示する方法は？（ルーター3.0.0-beta.1）

app.component.htmlテンプレートにルート名を表示したい。私は簡単な解決策を探しています。これは次のように書くことができます。

{{router.currentRoute.name}}

私の現在のルーター構成：

export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        name: 'Catalog', // Is this property deprecated?
        component: CatalogComponent
    },
    {
        path: 'summary',
        name: 'Summary',
        component: SummaryComponent
    }
];
javascriptangularangular-ui-router
9
Adrian Moisa

ルートが次のようにデータプロパティのルート名で構成されている場合：

{
    path: 'somepath',
    component: SomeComponent,
    data: {
        name: 'My Route Name'
    }
}

app.component.tsでは、import 'rxjs/add/operator/filter'; + import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';を実行して、次の操作を実行できます。

constructor(
  private route: ActivatedRoute,
  private router: Router
) { }

ngOnInit() {
  this.router.events
    .filter(event => event instanceof NavigationEnd)
    .subscribe(event => {
      let currentRoute = this.route.root;
      while (currentRoute.children[0] !== undefined) {
        currentRoute = currentRoute.children[0];
      }
      console.log(currentRoute.snapshot.data);
    })
}

これにより、NavigationEndイベントがリッスンされ、現在のルートまでトラバースされて、そのルートのdataにアクセスできるようになります。

上記のコードを使用して/somepageを使用している場合は、コンソールに{ name="My Route Name"}が出力されます。

15
Mark Leong