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

Posted 2023-02-22

【中文标题】路由器插座内的路由器插座不工作

【英文标题】：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

【参考方案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)
]
];