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

MAIN.html

<h1>FE2</h1>
<MAIN-nav></MAIN-nav>
<router-outlet></router-outlet>

主导航

<a [routerLink]="['/ncf']">New Customer Folder</a>

它工作正常，在MAIN导航中，我有一些延迟加载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"时，它已加载，但是它在第一个路由器出口下方(在MAIN级别)呈现，但我希望它在第二个路由器出口下方呈现，在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
            }
     ]
  }
]

请参见此柱塞，它针对三级路线的类似问题提供了解决方案

See this Plunker, it has a solution for similar problem with three level of routes.

希望这会有所帮助！

这篇关于Angular 2/4中的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！