Angular 路由器：如何处理对子模块路由器的委托

Question

你能告诉我如何处理高级组件 router-outlet 及其子组件中另一个 router-outlet 的情况吗？

在我看来，在这种情况下，我需要将子组件放在自己的模块中，并使用 RouterModule.forChild 为其提供自己的路由器。配置后，我可以在 localhost:4200/main 上显示主要组件，但是在转到 localhost:4200/main/section:

时出现此错误

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/section'

我在app.component.html:

<router-outlet></router-outlet>

在这个app.component.html中我想在localhost:4200/main

下显示MainViewComponent

这个 MainViewComponent 组件在它自己的模块中有它自己的逻辑来在它的 <router-outlet></router-outlet> 中显示它的子组件并且应该可以通过 url 访问，比如 localhost:4200/main/section, localhost:4200/main/section2.

app/app-routing.module.ts（由应用导入。module.ts）

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainViewComponent } from './main-view-module/main-view/main-view.component';

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainViewComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

app/main-view-module/app-routing.module.ts（由 app/main-view-module/main-view.module.ts 导入）

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SectionViewComponent }      from './main-view-module/section-view.component';
import { Section2ViewComponent }      from './main-view-module/section2-view.component';

const routes: Routes = [
  { path: '', redirectTo: 'section', pathMatch: 'full' },
  { path: 'section', component: SectionViewComponent },
  { path: 'section2', component: Section2ViewComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

Answer 1

你最好把所有路由放在一个地方，当1个组件router-outlet

存在于另一个组件中你可以这样做

const routes: Routes = [
   { path: '', redirectTo: 'main', pathMatch: 'full' },
   { path: 'main', component: MainViewComponent, children: [
       { path: '', redirectTo: 'section', pathMatch: 'full' },
       { path: 'section', component: SectionViewComponent },
       { path: 'section2', component: Section2ViewComponent }
    ]}
];

在其他情况下，组件只会改变 1 个（像你一样谈论放置路线，但在 1 个地方）

其实你所有的模块都是导入到app.module，模块更多的是代码抽象，所以你可以在一个地方构建路由层次结构，应该不会出错。在这一点上，使用 children 选项你就像在说，我希望当我在子路线上时这个组件存在。

Answer 2

进一步研究后：

我要查找的功能称为 Lazy loading。

为了使我的示例工作，我只需要将 loadChildren 属性添加到 app/app-routing.module.ts:

中的 path

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainViewComponent,
        loadChildren: 'app/main-view-module/main-view.module#MainViewModule'
  }
];

Angular 路由器：如何处理对子模块路由器的委托

Angular Router: How to handle delegation to submodule's router

angular

angular-ui-router