Angular 2/4中的嵌套路由

Question

我在一个应用程序上工作,我打算有以下结构:

-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将处理其组件的路由.以下是它现在的样子:

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>

MAIN-NAV

<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
  }
]

这是我的问题开始的地方:当我点击加载ACNP它被加载,但它在第一个路由器出口(在MAIN级别)下面呈现,但我希望它在nfc.html中定义的第二个router-outlet下面呈现.

我尝试使用命名路由器插座来做到这一点:

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时,我得到错误:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find the outlet NCFRouterOutlet to load 'ACNPStepOneComponent' 

如何在最近的路由器出口下方制作组件？

Answer 1

你需要更新你的ncfRoutes.ts,这acnp是一个不在同一级别的子路线,

export const ncfRoutes: Routes = [      
  {
    path: '',
    component: NCFComponent,
    children: [
           {
             path: 'acnp',
             loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
            }
     ]
  }
]

看到这个Plunker,它有一个三级路线的类似问题的解决方案.

希望这可以帮助!!