如何在訂閱到Angular2的router.events.subscribe時從Route或ActivatedRoute獲取數據？

Question

我試圖從路由器獲取數據，只要路由發生變化但我沒有成功。在這裏我設置asdf屬性

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    DashboardComponent, 
    OverviewComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot([ 
     { path: '', pathMatch: 'full', redirectTo: '' }, 
     { component: LoginComponent, path: 'login' }, 
     { 
     children: [ 
      { path: '', pathMatch: 'full', redirectTo: 'overview', data: { asdf: 'hello' } }, 
      { component: OverviewComponent, path: 'overview', data: { asdf: 'hello' } }, 
     ], component: DashboardComponent, 
     path: '', 
     }, 
    ]), 
    ], 
}) 
export class AppModule { } 

在這裏，我可以從路由器得到的URL時，路線的變化，但asdf未定義:(

import { Component, OnDestroy, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { ActivatedRoute, NavigationEnd } from '@angular/router'; 
@Component({ 
    selector: 'cs-map', 
    styleUrls: ['map.component.css'], 
    templateUrl: 'map.component.html', 
}) 
export class MapComponent implements OnInit { 
    private routerSub; 

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

    public ngOnInit() { 
    this.router.events.subscribe((val) => { 
     if (val instanceof NavigationEnd) { 
     let url = val.url; 
     console.log(this.activatedRoute.snapshot.data['asdf']); // data is defined but asdf is not :(
     } 
    }); 
    } 
} 

我怎樣才能得到asdf的價值？

編輯：我導航到該路線/overview

Answer 1

使用此代碼，而不而循環

constructor(private router: Router, 
     private activatedRoute: ActivatedRoute) 
{ 

this.router.events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => this.activatedRoute) 
     .map(route => route.firstChild) 
     .switchMap(route => route.data) 
     .map(data => data['asdf']) 
} 

Answer 2

數據必須是對象的數組，而不僅僅是對象，以便確定他們這樣

{ component: LoginComponent, path: 'login', data:[{myKey1: myValue1}] }, 

我們檢索它在你的組件構造

constructor(private router:Router, private activeRoute:ActivatedRoute) { 

    router.events 
    .filter(event => event instanceof NavigationEnd) 
    .map(_ => this.router.routerState.root) 
    .map(route => { 
     while (route.firstChild) route = route.firstChild; 
     return route; 
    }) 
    .flatMap(route => route.data) 
    .subscribe(data => { 
    console.log(data[0].myKey1); 

    }); 

}