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、应用程序和子应用程序。每个应用程序和子应用程序都将独立开发。未来可能会有更多的惰性加载级别。

我希望在每个级别上都能独立地维护路由，这意味着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下方渲染？

- Jarosław Rewers

Answer 1

您需要更新您的ncfRoutes.ts文件，使acnp成为子路由而不是在同一级别上。

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

看看这个Plunker，它提供了一个解决类似问题的三级路由的解决方案。

希望这可以帮到你！

- Madhu Ranjan

Answer 2

在Angular 8中，您可以创建具有自己模块的组件的独立RoutingModules。

在 app-routing.module.ts 文件中使用 loadChildren 加载子组件的模块。

const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'attendance', component: AttendanceComponent },
    { path: 'leaves', loadChildren: () => import(`./leaves/leaves.module`).then(m => m.LeavesModule) },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: Page404Component },
];

查看完整的教程在这里

- Code Spy