我正在尝试使用与路由器相关的接口,并且在检查ActivatedRoute时发现了一些奇怪的行为
场景:我有一个标题,需要跟踪标题中显示的路径(数据参数),因为路径更改发生在正文中,每个路径更改都需要有一些与之关联的数据。
所以我在我的标题组件构造函数
中使用下面的代码this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while (route.firstChild) {
route = route['firstChild'];
}
return route;
})
.filter((route) => route.outlet === 'primary')
.mergeMap((route) => route.data)
.subscribe((event) => {
this.routeTitle = event['title'];
})
App root看起来像这样
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
const APP_ROUTES: Routes = [
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module#DashboardModule',
data: { title: 'Dashboard' }
},
{
path: 'change-request',
loadChildren: 'app/change-request/change-request.module#ChangeRequestModule',
data: { title: 'Change Request' }
},
{
path: 'change-notice',
loadChildren: 'app/change-notice/change-
notice.module#ChangeNoticeModule',
data: { title: 'Change Notice' }
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: '/dashboard' }
];
@NgModule({
imports: [
RouterModule.forRoot(
APP_ROUTES,
{
enableTracing: false,
useHash: false
}
)
],
exports: [
RouterModule
],
providers: [
]
})
export class AppRoutingModule { }
一切正常,我能够在标题上显示标题但我的代码似乎很大,以获得与路线相关的数据。 所以我试过
this.activatedRoute.data.subscribe(data=>{console.log(data)});
虽然它是可观察的,但它无法触发可能我可以假设这不是基于事件的
目标是找到简化版本,因为我的直觉感觉总是有更好的方法来实现它。