Question

我正在尝试为RouterModule创建动态路由数组。正如don't and do's中所述，我正在导出一个函数用作我的路径数组：

export function DynamicRoutingCreation() {
  let myRoutes;
  // .. forEach loop to create dynamic array

}

并在我的AppModule中：

    const APP_ROUTES: Routes = DynamicRoutingCreation();
...

RouterModule.forRoot(APP_ROUTES)

但我一直收到这个错误：

Error ... Calling function 'DynamicRoutingCreation' , function calls are not supported. Consider replacing the function or lambda with a reference to an exported function.

Answer 1

我找到了一个解决方法 - 我没有传递RouterModule函数引用，而是执行了以下操作：

在AppModule.ts

内

..
RouterModule.forRoot([]) // pass an empty routes
..

稍后，在AppComponent内，使用动态数组重置路由器：

router.resetConfig(/* dynamic function returning routes array */)

没有副作用

Answer 2

这可以通过使用函数工厂向ROUTES提供路由定义来解决...（在Angular 4.1.2上测试）

修改您的AppModule（app.module.ts）：

在导入数组中更改RouterModul.forRoot

imports: [
RouterModule.forRoot(routes)
...

到

RouterModule.forRoot([])

在提供者数组中添加这两个提供者：

... ANALYZE_FOR_ENTRY_COMPONENTS
} from '@angular/core';
...  ROUTES,
} from '@angular/router';
...
providers: [
{provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
{provide: ROUTES, multi: true, useFactory: getRoutes},
...

定义工厂函数（在app.module.ts文件的顶部）：

export function getRoutes() {
  return routes;
}

也许您还需要创建新文件，例如：app.routes.ts并将动态路线定义放在那里，例如：

export let routes: Routes = [
            {
                path: '',
...
routes.push(objwithsome new route) etc..
...

并将其导入AppModule（app.module.ts）。

import { routes } from './app.routes';

Angular AOT：不支持函数调用

2 个答案: