Angular 2 获取延迟加载路由的子路由答案

【问题标题】：Angular 2 Get child routes of Lazy Load RoutesAngular 2 获取延迟加载路由的子路由
【发布时间】：2017-04-08 16:35:51
【问题描述】：

我有一个带有延迟加载定义路由的 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') 的路由？我想实现的是下一个：我想延迟加载模块，但是当您打开应用程序时，我想显示应用程序主菜单，该菜单还应显示二级导航路线（不仅仅是链接到“管理员”还可以访问“管理员/区域”。并非所有用户都可以访问所有路由...）

【问题讨论】：

标签： angular routes lazy-loading

【解决方案1】：

您可以使用 CanActivate 守卫，导入子路由并将其取消到 routeConfig 并调用 resetConfig 方法。

您可以在此链接中找到更多详细信息https://github.com/angular/angular/issues/11437

希望对你有帮助。

【讨论】：

【解决方案2】：

知道这是一个非常古老的问题，但对于每个寻找此用例解决方案的人来说，只要您的模块上没有任何动态路由 - 您只需导入 '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>

【讨论】：