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

Question

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 
    } 
]; 

Answer 1

のような私は簡単な解決策、次のように書くことができる何かを探していますこの：あなたのapp.component.tsあなたがimport 'rxjs/add/operator/filter'; + import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';と、次のことができないで

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

：

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"}と表示されます。