嵌套路由：如何在路由内路由？答案

【问题标题】：Nested routing: how to route inside a route?嵌套路由：如何在路由内路由？
【发布时间】：2019-11-01 08:26:21
【问题描述】：

我正在尝试创建一个嵌套路由（我相信这是它的术语）。

一个主路由提供四个完全不同的页面（main-component.html 只是路由器出口标签）。

在第一个路由路径中，我希望在页面的一部分（中心 div）中有第二个路由，该路由将通过箭头按钮（向前和向后）导航。此 div 的内容很复杂（包括与后端服务器的通信），因此使用 *ngIf 和不同模板的构造并不理想）。

这可以通过两条路线完成吗？如果有，怎么做？

【问题讨论】：

只需在需要的地方添加<router-outlet></router-outlet>，即如您所说的在您的“第一路线路径”中。然后，这些路线将成为您的“第一条路线路径”的子级。
文档将为您提供帮助：angular.io/guide/router#milestone-4-crisis-center-feature

标签： angular angular-routing angular-router

【解决方案1】：

可以这样做：

import { Routes, RouterModule }   from '@angular/router';

import { FirstComponent, 
         SecondComponent,
         ThirdComponent,
         FourthComponent
} from './app.component';

const appRoutes: Routes = [        
    {
        path: 'first',
        component: FirstComponent,
        children:[
        {
         path : 'second',
         component: SecondComponent,
         children:[
           {
            path : 'fourth',
            component: FourthComponent
           },
           {
            path : 'third',
            component: ThirdComponent
           }
         ]
        }
       ]
     },
     {
        path: '',
        redirectTo: '/first',
        pathMatch: 'full'
    },
];

和组件：

import { Component }          from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Routing</h3>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}


@Component({
  template: `
    <h3 class="title">FirstComponent</h3>
    <nav>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class FirstComponent {
}

@Component({
  template: `
    <h3 class="title">SecondComponent</h3>
    <nav>
      <a routerLink="second" routerLinkActive="active" >Second</a>
      <a routerLink="third" routerLinkActive="active" >Third</a>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class SecondComponent {
}

@Component({
  template: `
    <h3 class="title">ThirdComponent</h3>
  `
})
export class ThirdComponent {
}

@Component({
  template: `
    <h3 class="title">FourthComponent</h3>
    <hr />
  `
})
export class FourthComponent {
}

【讨论】：

【解决方案2】：

您可以创建延迟加载。带路由的顶级根模块。循序渐进。

index.html 文件

<body>
   <app-root></app-root>
<body>

然后创建root.module.ts文件和root-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RootComponent } from './root.component';
import { from } from 'rxjs';

const routes: Routes = [
  {
    path: 'account',
    loadChildren: './app/account/account.module#AccountModule',
    data: { preload: true }
  },
  {
    path: 'app',
    loadChildren: './app/app.module#AppModule',
    data: { preload: true }
  },
];

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

then create child account module and account routing. for following code

account-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountComponent } from './account.component';
import { LoginComponent } from '../login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


const routes: Routes = [
  {
    path: '',
    component: AccountComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
    ]
  }
];

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

【讨论】：

我无法访问“子”路由，我是否在 AppRoot.html 和 AccountComponent.html 中都使用（在这种情况下，在中心div）？两个 module.ts 文件中是否包含特定的行？ '#AccountModule' 应该指哪里？