如何獲得角度2中的當前路線自定義數據？

我已經建立了路由是像下面如何獲得角度2中的當前路線自定義數據？

const appRoutes: Routes = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    data: { 
     title: 'Login TTX' 
    } 
    }, 
    { 
    path: 'list', 
    component: ListingComponent, 
    data: { 
     title: ' TTX Home Page', 
     module:'list' 
    } 
    }, 
    { 
    path: '', 
    redirectTo: '/login', 
    pathMatch: 'full' 
    }, 
];

現在

當i到'/list'路線來然後'listing.component.ts'我寫下面的代碼

export class ListingComponent { 

    public constructor(private router:Router) { 
     //here how i can get **data** of **list** routes 

    } 
}

來源

2016-11-29 Rituraj ratan

貌似http://stackoverflow.com/questions/38644314/changing-the-page-title-using的DUP工作對我來說-the-angular-2-new-router/38652281＃38652281 –

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    }

來源

2016-11-29 10:43:35

問題是這條路由不是最終路由所必需的，它是一個嵌套樹。這真的取決於你把這件作品放在哪裏，然後你就在這裏玩你的運氣。 – windmaomao

這並不總是會給你正確的結果，因爲它取決於你放置的位置。 – asmmahmud

對，如果你沒有將它添加到當前路由添加的組件中，則需要遍歷路由樹以使所需的段能夠訪問數據。 –

後我測試的各種方案中，所述角支持組答案很好地解決了這個問題。

ActivatedRoute doesn't carry data，這裏是檢測data: { page: 'login' }內頁面變量的解決方案。

import { Router, RoutesRecognized } from '@angular/router'; 

export class AppComponent { 
    page = ''; 
    constructor(private router: Router) { 
    // listen to page variable from router events 
    router.events.subscribe(event => { 
     if (event instanceof RoutesRecognized) { 
     let route = event.state.root.firstChild; 
     this.page = 'page-' + route.data.page || ''; 
     console.log('Page', this.page); 
     } 
    }); 
    } 
}

來源

2017-09-19 16:06:48 windmaomao

角形4+

如果你把像AppComponent父或上層部件下面的代碼，那麼它不會工作。它僅適用於您已爲其定義的路徑的自定義數據的兒童或者更低級別的組件：如果你想從父或上層部件全球訪問路徑的自定義數據訪問的變化

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    }

所以，在路由自定義數據中，您必須聽取路由器事件，尤其是RoutesRecognized或NavigationEnd事件。我要告訴與AppComponent兩個程序有兩個事件：

第一種方法：

export class AppComponent implements OnInit, AfterViewInit { 

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

    ngOnInit() { 
     this.router 
     .events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => { 
      let child = this.activatedRoute.firstChild; 
      while (child) { 
      if (child.firstChild) { 
       child = child.firstChild; 
      } else if (child.snapshot.data && child.snapshot.data['custom_data']) { 
       return child.snapshot.data['custom_data']; 
      } else { 
       return null; 
      } 
      } 
      return null; 
     }).subscribe((customData: any) => { 
      console.log(customData); 
     }); 
    } 
}

第二種方法是使用：

this.router.events 
.filter(event => event instanceof RoutesRecognized) 
.map((event: RoutesRecognized) => { 
    return event.state.root.firstChild.data['custom_data']; 
}) 
.subscribe(customData => { 
    console.log(customData); 
});

注：即使最後一個更短，通常工作，但是，如果你有嵌套的路線，那麼鼓勵使用第一個。

來源

2017-10-11 21:26:23 asmmahmud

太棒了，你的第一個方法幫了很大忙。謝謝！對於其他人：您必須導入「rxjs/add/operator/filter」和「rxjs/add/operator/map」才能使其工作 –

這app.component.ts（NG 5）

constructor(
    private router: Router, 
) { 

router.events.subscribe((routerEvent: Event) => { 
     this.checkRouterEvent(routerEvent); 
    }); 
} 

checkRouterEvent(routerEvent: Event): void { 
    if (routerEvent instanceof ActivationStart) { 
     if (routerEvent.snapshot.data.custom_data) { 
      this.currentpage = routerEvent.snapshot.data['custom_data']; 
      console.log('4.' + this.currentpage); 
     } 

    }

來源

2018-02-01 16:38:26 FatGit

如何獲得角度2中的當前路線自定義數據？

回答

相關問題