Question

创建面包屑组件

它要求您在路线breadcrumb中设置data键值对：

const routes: Routes = [{
    path: "",
    component: RootComponent,
    children: [{
            path: "signin",
            component: SigninComponent,
            data: {
                breadcrumb: "Sign In"
            }
        },
        {
            path: "signup",
            component: SignupComponent,
            data: {
                breadcrumb: "Sign Up"
            }
        },
        {
            path: "",
            component: IndexComponent
        }
    ]
}, ];

对于我的app模块，它按预期工作。

但是，我有一个主模块，在用户从应用程序登录后延迟加载。这就是我想要的面包屑。

出于某种原因，我无法从我的延迟加载的模块访问data，从而在breadcrumb.component.ts中满足此条件并破坏了行为。

 if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
    continue;
}

为什么我无法在此处获取数据？

我的应用路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TmLoginComponent } from './login/tm-login.component';
import { MainComponent } from './main/main.component';
import { AuthenticationGuard } from './login/authentication-guard';
import { PageNotFoundComponent } from './404/page-not-found.component';


const routes: Routes = [{
    path: '',
    loadChildren: 'app/main/main.module#MainModule',
    canActivate: [AuthenticationGuard],
}, {
    path: 'login',
    component: TmLoginComponent,
}, {
    path: 'home',
    redirectTo: '/',
    pathMatch: 'full',
}, {
    path: '**',
    component: PageNotFoundComponent
}];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

我的主路由模块（懒惰）：

import { NgModule }             from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './main.component';
import { IndiaComponent } from './india/india.component';
import { MaharashtraComponent } from './india/maharashtra/maharashtra.component';
import { KarnatakaComponent } from './india/karnataka/karnataka.component';
import { PuneComponent } from './india/maharashtra/pune/pune.component';
import { MumbaiComponent } from './india/maharashtra/mumbai/mumbai.component';

const routes: Routes = [{
    path: '',
    component: MainComponent,
    data: {
        breadcrumb: 'Main'
    },
    children: [{
            path: 'india',
            component: IndiaComponent,
            data: {
                breadcrumb: 'India'
            },
            children: [{
                    path: 'maharashtra',
                    component: MaharashtraComponent,
                    data: {
                        breadcrumb: 'Maharashtra'
                    },
                    children: [{
                            path: 'pune',
                            component: PuneComponent,
                            data: {
                                breadcrumb: 'Pune'
                            },
                        },
                        {
                            path: 'mumbai',
                            component: MumbaiComponent,
                            data: {
                                breadcrumb: 'Mumbai'
                            }
                        },
                    ]
                },
                {
                    path: 'karnataka',
                    component: KarnatakaComponent,
                    data: {
                        breadcrumb: 'Karnataka'
                    }
                },
            ],
        },

    ]
}, ];

export const mainRouting: ModuleWithProviders = RouterModule.forChild(routes);

Answer 1

将ActivatedRoute注入您的组件并订阅data属性，因为它是BehaviorSubject：

export class MainComponent {

    constructor(private _activatedRoute: ActivatedRoute) {
        this._activatedRoute.data.subscribe(data => {
            console.log('data: ', data); // => { breadcrumb: 'Main' }
        });
    }
}

Angular2路由：无法访问路由中定义的数据

1 个答案: