Angular 2获取Lazy Load Routes的子路由

时间:2016-11-24 11:29:48

标签: angular routes lazy-loading

我有一个带有延迟加载定义路由的App模块:

export const routes: Routes = [
    { path: '', pathMatch: 'full', loadChildren: 'app/dashboard/dashboard.module#DashboardModule', component: CoreComponent, data: {showInMenu: false, role: 'ROLE_USER'}},
    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', component: CoreComponent, data: {showInMenu: true, role: 'ROLE_ADMIN'}},
];

在管理模块中,我定义了管理员的路由:

export const adminRoutes: Routes = [
    { path: '', pathMatch: 'full', component: AdminDashboardComponent},
    { path: 'areas', component: ManageAreasComponent}
];

我想知道在加载模块之前是否可以获取admin(''和'areas')的路由?我想要实现的是下一个:我希望模块延迟加载,但是当你打开应用程序时,我想显示应用程序主菜单,它应该还显示第二级导航路径(不只是链接到'admin'还有'admin / areas'。并非所有用户都可以访问所有路由......)

2 个答案:

答案 0 :(得分:0)

您可以使用CanActivate防护,导入子路由并将其取消配置到routeConfig并调用resetConfig方法。

您可以在此链接https://github.com/angular/angular/issues/11437

中找到更多详细信息

我希望它可以提供帮助。

答案 1 :(得分:0)

意识到这是一个非常老的问题,但是对于每个正在寻找这种用例解决方案的人,只要您的模块上没有任何动态路由,就可以导入 在应用程序中任何位置的“ adminRoutes ”,并将子路由的“ path ”与顶级路由的“ path ”连接起来

在这种情况下,无需摆弄路由器配置。只要尝试这样的事情:

import { routes } from 'path/to/top-level/routes';
import { dashboardRoutes } from 'path/to/dashboard-module/dashboard.module';
import { adminRoutes } from 'path/to/admin-module/admin.module';
@Component( ... )
export class FgViewBaseComponent {
    public topLevelRoutes = 
    public childRoutes = {
        '': dashboardRoutes
        'admin': adminRoutes
    }
    public getLinkText( topLevelRoutePath: string, childRoute: string = false ): string {
        ...
    }
    // CONSTRUCTOR
    constructor(){
        ...
    }
}

模板:

<ng-container *ngFor="route of routes">
    <a mat-button [routerLink]="[ route ]" routerLinkActive="active">{{ getLinkText( route ) }}</a>
    <ng-container *ngFor="childRoute of childRoutes[ route ]">
    <a mat-button [routerLink]="[ route, childRoute ]" routerLinkActive="active">{{ getLinkText( route, childRoute ) }}</a>
    </ng-container>
</ng-container>