Angular 2获取延迟加载路由的子路由
我有一个应用程序模块,具有延迟加载定义的路由:Angular 2获取延迟加载路由的子路由,angular,routes,lazy-loading,Angular,Routes,Lazy Loading,我有一个应用程序模块,具有延迟加载定义的路由: export const routes: Routes = [ { path: '', pathMatch: 'full', loadChildren: 'app/dashboard/dashboard.module#DashboardModule', component: CoreComponent, data: {showInMenu: false, role: 'ROLE_USER'}}, { path: 'admin', l
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/area”。并非所有用户都可以访问所有路线…)您可以使用CanActivate guard,导入子路由并将其取消绑定到routeConfig,然后调用resetConfig方法 您可以在此链接中找到更多详细信息
我希望它能有所帮助。意识到这是一个相当古老的问题,但对于每个寻找此用例解决方案的人来说,只要模块上没有任何动态路由,您就可以导入 “adminRoutes”位于应用程序中的任意位置,并使用顶级路由的“路径”连接子路由的“路径 在这种情况下,无需修改路由器配置。试着这样做:
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>
{{getLinkText(路由)}
{{getLinkText(路由,子路由)}