Question

我如何调用route config中的函数来设置Angular 5的子路由？代码示例：

export const homeRoutes: Routes = [
  {
    path: 'home',
    component: HomeContainer
    children: [
      getChildrenRoutes()
    ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes),
  ],
  ...
})
export class HomeRoutingModule {}

功能getChildrenRoutes()返回Route。在JIT模式下，它运行良好，但如果我进行AoT构建，则会抛出错误：

错误中的错误：静态解析符号值时出错。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda ...

Answer 1

首先，您必须在主模型（NgModel）上配置主路由。在一个单独的类（app.module.routing.ts）中，您必须使用子级实现主路由。它将更接近如下

＆＃13;

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path:'login',
    component:LoginComponent
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
      },
      {
        path: 'auth',
        loadChildren: './auth/auth.module#AuthModule'
      },
      {
        path: 'masterdata',
        loadChildren: './masterdata/master.module#MasterModule'
      }
     
    ]
  },
];
@NgModule({
  imports: [ RouterModule.forRoot(routes)],  /*, { enableTracing: true }) */ 
  exports: [ RouterModule ],
  providers:[AuthGuard,OnlyLoggedInUsersGuard,GuardService]
})
export class AppRoutingModule {}

＆＃13;

所以这条路线预计还会有3个子模块 1.dashboard 2.auth 3.masterdata

因此您可能需要为每个模块创建文件夹，并为每个模块分配一个主NGModule和路由模块。这里有一个子模块

＆＃13;

const routes: Routes = [
    {
        path:"",
        data:{
          title: "MasterData"
     },
        children:[
            {
                path:"apptypes",
                component:ApprovalTypesComponent,
                data:{
                    title:"Approval Types"
                },
                canActivate:[OnlyLoggedInUsersGuard,AuthGuard]
            }
        ]
    }
];

@NgModule({
    imports:[RouterModule.forChild(routes)],
    exports:[RouterModule]
})

export class MasterRoutings{}

＆＃13;

loadChildren: './masterdata/master.module#MasterModule'

此行将在＆＃34; ./ masterdata / master.module＆＃34; 路径中加载子模块和模块需要导出类 MasterModule 所以angular会加载该类的所有路由并添加到主路由表。

希望这会有所帮助谢谢

Angular Router使用函数来获取路由

1 个答案: