Angular 2/4 中的嵌套路由 [英] Nested routing in Angular 2/4
问题描述
我正在开发一个我打算具有以下结构的应用程序:
I work on an app which I intend to have following structure:
-MAIN - main "container" (main routes)
--NCF (lazy loaded, routes for it’s subapps)
---ACNP (lazy loaded)
----Component1
----Component2
---SubApp2 (lazy loaded)
---SubApp3 (lazy loaded)
--App2 (lazy loaded)
--App3 (lazy loaded)
--…
这是应用程序的起始框架,它将具有 3 个级别——主应用程序、应用程序和子应用程序.每个应用程序和子应用程序都是独立开发的.将来可能会有更多的延迟加载级别.我希望路由在每个级别独立维护,这意味着 MAIN 将处理 NCF 和 App2 和 App3 的路由(主要用于延迟加载);NCF 将处理 ACNP、SubApp2 和 SubApp3 的路由(同样主要是延迟加载);ACNP 将处理其组件的路由.这是它现在的样子:
It’s starting framework for app which will have 3 levels – MAIN, apps and subapps. Every app and subapp is to be developed independently. In future there may be more lazy-loaded levels. I want routing to be maintained independently on each level, which means MAIN will handle routes (for lazy loading mainly) for NCF and App2 and App3; NCF will handle routes (again mostly lazy loaded) for ACNP, SubApp2 and SubApp3; ACNP will handle routes for its components. Here’s how it looks right now:
MAIN-routes.ts:
MAIN-routes.ts:
import {Routes} from "@angular/router"
export const appRoutes: Routes = [
{
path: 'ncf',
loadChildren: './ncf/ncf.module#NewCustomerFolderModule
}
]
MAIN.html
<h1>FE2</h1>
<MAIN-nav></MAIN-nav>
<router-outlet></router-outlet>
主导航
<a [routerLink]="['/ncf']">New Customer Folder</a>
而且它工作正常,在 MAIN-nav 中,我有一些链接可以延迟加载 NCFModule.
And it works fine, inside MAIN-nav I have links which lazy load NCFModule.
NCFModule.ts
NCFModule.ts
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ncfRoutes)
],
declarations: [NewCustomerFolderComponent]
})
ncfRoutes.ts
ncfRoutes.ts
import {Routes} from "@angular/router"
import { NCFComponent } from "./ncf.component"
export const ncfRoutes: Routes = [
{
path: '',
loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
},
{
path: '',
component: NCFComponent
}
]
ncf.html
<hr>
<a [routerLink]="['acnp']">Load ACNP</a>
<p>test</p>
<router-outlet></router-outlet>
acnp.routes(现在我只想默认加载一个组件)::
acnp.routes (right now I just want to load one component on default)::
export const acnpRoutes: Routes = [
{
path: '',
component: ACNPStepOneComponent
}
]
这里是我的问题开始的地方:当我点击加载 ACNP 时,它已加载,但它呈现在第一个路由器插座(在主级别)下方,但我希望它呈现在 nfc.html 中定义的第二个路由器插座下方.
Here’s where my problem begin: When I click on Load ACNP it is loaded, but it renders below first router-outlet (on MAIN level), but I want it to render below second router-outlet, defined in nfc.html.
我尝试使用命名的路由器插座来做到这一点:
I tried to do it using named router outlets:
ncf.html
<hr>
<a [routerLink]="['acnp', {outlets: {NCFRouterOutlet: ['acnp']}}]">Load ACNP</a>
<p>test</p>
<router-outlet name="NCFRouterOutlet"></router-outlet>
acnp.routes
export const acnpRoutes: Routes = [
{
path: '',
component: ACNPStepOneComponent,
outlet: 'NCFRouterOutlet'
}
]
但是当我点击加载 ACNP 时,我得到错误:
But hen when I click on Load ACNP I get error:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find the outlet NCFRouterOutlet to load 'ACNPStepOneComponent'
如何让组件在最近的路由器插座下方呈现?
How can I make components render below closest router-outlet?
推荐答案
你需要更新你的 ncfRoutes.ts
以便 acnp
是一个不在同一个的子路由水平,
you need to update your ncfRoutes.ts
so that acnp
is a child route not on the same level,
export const ncfRoutes: Routes = [
{
path: '',
component: NCFComponent,
children: [
{
path: 'acnp',
loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
}
]
}
]
看到这个Plunker,它有一个解决类似问题的三级路由.
See this Plunker, it has a solution for similar problem with three level of routes.
希望这有帮助!!
这篇关于Angular 2/4 中的嵌套路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!