路由器插座内的路由器插座不工作答案

【问题标题】：Router outlet inside router outlet is not working路由器插座内的路由器插座不工作
【发布时间】：2021-03-13 05:50:05
【问题描述】：

这是我的主要路由配置

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

const routes: Routes = [{ path: 'child-a', loadChildren: () => import('./child-a/child-a.module').then(m => m.ChildAModule) }, { path: 'child-b', loadChildren: () => import('./child-b/child-b.module').then(m => m.ChildBModule) }];

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

接下来我有孩子了

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

import {ChildAComponent} from './child-a.component';

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
];

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

当然还有html： app.component.html：

<h2>App works</h2>
<div class="nav-menu">
  <a routerLink="child-a" [routerLinkActive]="['active-link']" class="link">child a</a>
  <a routerLink="child-b" [routerLinkActive]="['active-link']" class="link">child b</a>
</div>
<router-outlet></router-outlet>

和应用子 a：

<h3>Child A</h3>
<div class="nav-menu">
  <a routerLink="child-a1" [routerLinkActive]="['active-link']" class="link">child a1</a>
  <a routerLink="child-a2" [routerLinkActive]="['active-link']" class="link">child a2</a>
</div>
<router-outlet></router-outlet>

在获取 child-a1 和 child-a2 时使用此配置，子子组件替换主路由器出口中的子组件。

尝试使用路由器插座的名称不起作用我尝试这样做：

<router-outlet name=aux></router-outlet>
or
<router-outlet name='aux'></router-outlet>

和路线

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module), outlet:'aux'},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module), outlet:'aux'},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module), outlet:'aux'}
];

【问题讨论】：

除非您在同一级别有 2 个路由器插座，否则您可能不需要命名路由器
stackblitz.com/edit/angular-ivy-17ypzp?file=src/app/child-a/… 。请参考 stackblitz 并根据您的要求进行修改。
此解决方案不起作用。单击子 a 时，子 a 会显示标题和指向 a1 的链接。单击 a1 时，a 消失并显示子 a1

标签： angular routes

【解决方案1】：

我发现了一个错误：In child route configuration instead of

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
];

应该是：

const routes: Routes = [
  {path: '', component: ChildAComponent, children:[
    {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
    {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
    {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
]}
];

【讨论】：