我负责一款应用程序的开发,我希望它具有以下结构:
-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、应用程序和子应用程序。每个应用程序和子应用程序都将独立开发。未来可能会有更多的惰性加载级别。
我希望在每个级别上都能独立地维护路由,这意味着MAIN将处理NCF、App2和App3的路由(主要是为了惰性加载);NCF将处理ACNP、SubApp2和SubApp3的路由(同样是为了惰性加载);ACNP将处理其组件的路由。
以下是当前的情况:
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。
NCFModule.ts
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ncfRoutes)
],
declarations: [NewCustomerFolderComponent]
})
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 (现在我只想默认加载一个组件):
export const acnpRoutes: Routes = [
{
path: '',
component: ACNPStepOneComponent
}
]
这是我的问题所在:当我点击Load ACNP时,它已被加载,但它呈现在第一个路由器插座(在MAIN级别下),但我希望它呈现在在nfc.html中定义的第二个路由器插座下面。
我尝试使用命名路由插座来解决这个问题:
nfc.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”时,出现错误:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find the outlet NCFRouterOutlet to load 'ACNPStepOneComponent'
我怎样才能使组件在最近的router-outlet
下方渲染?