Angular 2(Final):resetConfig将路由添加到延迟加载路由
我想了解如何动态添加路由到那些来自延迟加载模块。 我拥有核心应用,而在路线:Angular 2(Final):resetConfig将路由添加到延迟加载路由
export const routes = [{
path: "",
component: HomeComponent
}, {
path: "moduleA",
loadChildren: "app/moduleA/A.module"
}];
在A.module我从导入 “本地” moduleA.routes.config.ts路线:
const routes = [{
path: "",
component: ModuleAHomeComponent,
children: [
{ path: "", component: ModuleAListComponent },
{ path: ":id", component: ModuleADetailComponent }
]
}];
export const routing = RouterModule.forChild(routes);
到目前为止好。现在,在ModuleADetailComponent中,我有一个“附加模块”列表,我将其称为插件,用于我的webapp,它们是单独开发的,我希望能够在ModuleADetailComponent页面中显示。 因此,此组件的模板是这样的:
<div *ngFor="let plugin of plugins">
<div class="header">{{ plugin.name }}</div>
<router-outlet name="*plugin.name*">*LOAD MODULE HERE*</router-outlet>
</div>
当然,插件是在导航ModuleADetailComponent装配置,所以我不知道提前哪些模块的配置和有多少是。 最后,这些插件中的每一个都可以是一个NgModule(在工作台环境中单独开发)。
我需要的是:我该如何修改路由器配置,动态地将子项添加到moduleA.routes.config.ts中定义的路由中? 举例来说,如果我有两个插件,我要动态地使用router.resetConfig有那么我有什么,如果moduleA.routes.config.ts是这样的:
const routes = [{
path: "",
component: ModuleAHomeComponent,
children: [
{ path: "", component: ModuleAListComponent },
{
path: ":id",
component: ModuleADetailComponent,
children: [
{
path: "plugin1",
loadChildren: "app/plugins/plugin1.module",
outlet: "plugin1"
},
{
path: "plugin2",
loadChildren: "app/plugins/plugin2.module",
outlet: "plugin2"
}
]
}
]
}];
export const routing = RouterModule.forChild(routes);
我希望我能实现它,否则插件将不得不进行开发,但它们可以成为可从导航中受益的大型子模块。
编辑27/09/2016:我已经组装了这个plunkr:http://plnkr.co/edit/6aV5n5K5wdqdiYo49lZv。 我目前能够做的是动态加载组件并将它们添加到应用程序中(请参阅“动态模块”选项卡)。 尽管未找到任何官方文档(请参阅“动态路由”选项卡),但我所做的还是使用多个命名的路由器插座。尽管标签名称,路线提前知道。
我想要做的是:动态加载配置(dynamicRoutes数组中的DynamicRoutesComponent),只有创建每个动态路由一个路由器出口后以及使用时resetConfig(或需要什么)有这样的配置:
{
path: "dynamic-routed",
component: DynamicRoutesComponent,
children: [
{ path: "", component: EmptyComponent },
{ path: "component1", component: Component1, outlet: "component1" },
{ path: "component2", component: Component2, outlet: "component2" }
]
}
每个动态路线有一个孩子。
在此先感谢!
所有的第一,loadChildren
属性方法必须具有以下格式(https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing)提供:
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
},
正如所看到的上述情况,module path
和module name
与#
炭接合。
就你而言,你需要修改你的应用程序。
export const routes = [{
path: "",
component: HomeComponent
}, {
path: "moduleA",
loadChildren: "app/moduleA#ModuleA"
}];
这只是一个前奏,现在,让我们进入了解决方案:路线如下(不知道你的模块/文件名,并plunkr样品不反映在这个问题上给出的名称)或多或少你的问题。据我读,你想动态添加子路由。
您可以使用以下代码在您的要素模块中动态提供子路线。
import {ROUTES} from '@angular/router/src/router_config_loader';
import {ANALYZE_FOR_ENTRY_COMPONENTS} from '@angular/core';
[...]
let routesToAdd = ... // provide your routes here
@NgModule({
[...]
imports: [RouterModule.forChild([])] // Empty on purpose
[...]
providers: [
{
provide: ROUTES,
useValue: routesToAdd,
multi: true
},
{
provide: ANALYZE_FOR_ENTRY_COMPONENTS,
useValue: routesToAdd, // provide them here too
multi: true
}
],
[...]
})
你必须提供ANALYZE_FOR_ENTRY_COMPONENTS
令牌相同的路线(以及ROUTES
令牌),否则你会得到No component factory found for YOUR_COMPONENT. Did you add it to @NgModule.entryComponents?
错误。
但是,此代码可能在AoT编译期间产生错误。在这种情况下,您需要为ROUTES
令牌提供factory
而不是value
。但是,您将无法为ANALYZE_FOR_ENTRY_COMPONENTS
令牌提供factory
令牌 - 它只接受useValue
(请参阅https://github.com/angular/angular/blob/03e855ae8f9e9b86251320c7551a96092bd8b0c4/modules/%40angular/compiler/src/metadata_resolver.ts#L926)。
在这种情况下,使用下面的代码的功能模块:
import {ROUTES} from '@angular/router/src/router_config_loader';
[...]
let routesToAdd = ... // provide your routes here
@NgModule({
[...]
imports: [RouterModule.forChild([])] // Empty on purpose
[...]
providers: [
{
provide: ROUTES,
useFactory: (getRoutesFromSomewhere),
//deps: [SomeService, SOME_TOKEN] // deps is optional, in the case you need no params - delete it; otherwise pass 'em
multi: true
}
],
entryComponents: [CompA, CompB, CompC, etc...]
[...]
})
注意:使用观测量/承诺提供的路线是不是一个可靠的解决方案,因此角路由器预计Route[]
或Routes
,但HTTP请求只能返回一个Observable/Promise(Angular应用程序已初始化,但路径的检索过程仍使用Observables/Promises继续)(请参阅https://github.com/ngx-i18n-router/config-loader#readme)。
使用返回Route[]
或Routes
的函数。
同时,您可能会检查@ngx-i18n-router/core(Angular的国际化实用工具,受益于动态路由)和此example-app作为其实施的module file。
非常感谢您提供详细的答案,当我回到那个项目时,我一定会试着让你知道它是否有效,现在我很伤心地转向别的东西! – Etchelon
我无法使代码正常工作。 Geetting NavigationError {ID:4,URL: “/产品”,错误:ZoneAwareError} 这是featue模块代码 对象@NgModule({ 进口: SharedModule, RouterModule.forChild([]) ], 声明: ProductListComponent, ProductDetailComponent, ProductEditComponent, ], 提供商: ProductService, ProductResolver, { 提供:路线, useValue:_routes, 多:真 }, { 提供:ANALYZE_FOR_ENTRY_COMPONENTS, useValue:_routes, 多:真 } ] }) – bomaboom