Question

我正在使用路径的data属性在我的应用中提供面包屑。我有两个子模块，路由组件非常相似。两者都有带孩子的顶级路线，其中一条路线还有较低级别的儿童路线。

提取面包屑令牌有两种不同的情况。一个是面包屑是路径的静态部分，第二个是面包屑被定义为正在显示的对象的一部分。

在第一种情况下，我需要使用路由中定义的值，而在第二种情况下，我不希望在路由中定义面包屑令牌，因为它来自其他地方。

使用一个模块，我得到了我想要的行为：我在路由层次结构的顶层声明了一个数据属性值，而在ActivatedRouteSnapshot中，它只出现在该级别。在第二个模块中，在顶级声明的数据属性值也出现在ActivatedRouteSnapshot的子节点中。

任何有关解决此问题的帮助将不胜感激。代码示例和ActivatedRouteSnapshot实例如下所示。

谢谢！

第1单元：项目

const projectRoutes: Routes = [
{ path: 'projects',
    component: ProjectsComponent,
    data: {breadcrumb: 'Projects'},
    canActivate: [AuthGuard],
    children: [
        {path: '', component: ProjectListComponent},
        {path: ':projectId', component: ProjectComponent, 
            resolve: {project: ProjectResolve, StaticDataResolve},
            children: [
                {path: ':datafileGroupId/upload', 
                    component: DatafileUploadComponent, 
                    data: {breadcrumb: 'Upload'},
                    resolve: {staticData: StaticDataResolve}},
                {path: ':datafileId', 
                    resolve: {datafile: DatafileResolve, 
                              staticData: StaticDataResolve},
                    children: [
                        {
                            path: 'derive',
                            component: DatafileDeriveComponent,
                            data: {breadcrumb: 'Derive'}
                        },
                        {path: '', component: DatafileComponent}
                    ]
                },
                {path: '', component: ProjectDetailComponent }
            ]
        },
        {path: '**', redirectTo: 'login'},
    ]
}
];

在“项目”模块中，面包屑标记＆＃39; Projects＆＃39;被分配给顶级路由的数据属性。有些儿童路线有自己的面包屑代币，没有问题。特定项目（path: ':projectId'）的子路由特别没有数据属性。在这种情况下，我的breadcrumb组件从项目实例中提取要使用的值。

这是Projects模块的ActivatedRouteSnapshot。＆＃39;项目＆＃39;分配给顶级路线的数据属性的令牌显示在顶层但不低于。

ActivatedRouteSnapshot
    _lastPathIndex: 0
    _resolve: Object
    _resolvedData: Object
    _routeConfig: Object
    _routerState: RouterStateSnapshot
    _urlSegment: UrlSegmentGroup
    children: Array[1]
        0: ActivatedRouteSnapshot
            _lastPathIndex: 1
            _resolve: Object
            _resolvedData: Object
            _routeConfig: Object
            _routerState: RouterStateSnapshot
            _urlSegment: UrlSegmentGroup
            children: (...)
            component: ProjectComponent(route)
            data: Object                    <==== No breadcrumb token
                StaticDataResolve: Object
                project: Object
                __proto__: Object
            firstChild: (...)
            fragment: undefined
            outlet: "primary"
            params: Object
            parent: (...)
            pathFromRoot: (...)
            queryParams: Object
            root: (...)
            routeConfig: (...)
            url: Array[1]
        __proto__: Object
    length: 1
    __proto__: Array[0]
    component: ProjectsComponent()
    data: Object
        breadcrumb: "Projects"      <==== breadcrumb token appears correctly
        __proto__: Object
    firstChild: (...)
    -- truncated --

第2单元：计算

const calculationRoutes: Routes = [
    { path: 'calculations',
        component: CalculationsComponent,
        resolve: {staticData: StaticDataResolve},
        data: {breadcrumb: 'Calculations'},
        canActivate: [AuthGuard],
        children: [
            {path: '', component: CalculationListComponent},
            {path: 'new',
                component: CalculationComponent,
                data: {breadcrumb: 'New'}},
            {path: ':calculationId',
                component: CalculationComponent,
                resolve: {calculation: CalculationResolve}},
            {path: '**', redirectTo: 'login'},
        ]
    }
];

“计算”模块的设置非常相似。特别是，顶级面包屑令牌以相同的方式设置，特定计算的子路由（path: ':calculationId'）没有数据属性。

这是ActivatedRouteSnapshot，显示在子路径上错误地显示的痕迹痕迹：

ActivatedRouteSnapshot
    _lastPathIndex : 0 
    _resolve : Object
    _resolvedData : Object
    _routeConfig : Object
    _routerState : RouterStateSnapshot
    _urlSegment : UrlSegmentGroup
    children : Array[1]
        0 : ActivatedRouteSnapshot
            _lastPathIndex : 1 
            _resolve : Object
            _resolvedData : Object
            _routeConfig : Object
            _routerState : RouterStateSnapshot
            _urlSegment : UrlSegmentGroup
            children : (...)
            component : CalculationComponent(route, router, menuService, dataService, snackBar, dialog, utils)
            data : Object
                breadcrumb : "Calculations"  <==== Unwanted breadcrumb token
                calculation : Object
                staticData : Object
                __proto__ : Object
            firstChild : (...)
            fragment : undefined
            outlet : "primary"
            params : Object
            parent : (...)
            pathFromRoot : (...)
            queryParams : Object
            root : (...)
            routeConfig : (...)
            url : Array[1]
            __proto__ : Object
        length : 1 
    __proto__ : Array[0]
    component : undefined
    data : Object
        breadcrumb : "Calculations"    <==== Breadcrumb token shown correctly
        staticData : Object
        __proto__ : Object
    firstChild : (...)
    --- truncated ---

在Angular 2路由器中使用data属性 - 不一致的行为

0 个答案: