订阅激活路线Angular 4.4中的数据

时间:2017-10-10 15:12:26

标签: angular

我正在尝试使用与路由器相关的接口,并且在检查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)});

虽然它是可观察的,但它无法触发可能我可以假设这不是基于事件的

目标是找到简化版本,因为我的直觉感觉总是有更好的方法来实现它。

0 个答案:

没有答案