javascript - 有没有办法可以使用`router-outlet`在Angular中渲染一个2级嵌套组件？

问题描述

我有一个带有一些链接的侧边栏。侧边栏位于/dashboard路线上。侧边栏上的链接是指向/dashboard. 我现在想渲染/dashboardmain 里面的孩子router-outlet。我不知道如何解决这个问题。以下是一些代码片段，可进一步阐述我的问题

我的路由结构

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'roles',
        component: RolesComponent,
      },
      {
        path: 'workgroups',
        component: WorkgroupsComponent,
        children: [
          {
            path: 'savewg',
            component: WgDetailsComponent,
          },
        ]
      },
      {
        path: 'users',
        component: UsersComponent,
      },
    ],
  },
];

应用组件

<!-- Main app component -->
<div class="app-view">
 <router-outlet></router-outlet>
</div>

登录.html

<button mat-raised-button color="warn" class="login-field" (click)="login(email, password)"
            <!-- rest of code ommited for brevity  -->

登录.ts

public login(email: string, password: string) {
    this.router.navigate(['dashboard'], { replaceUrl: true });
  }

工作组组件 html

    <button mat-raised-button color="warn" [routerLink]="['savewg']">
            <mat-icon>add</mat-icon>
              New
        </button>
       <!-- Code ommited for brevity -->

<router-outlet></router-outlet>
<div class="workgroup-filters">
<mat-form-field appearance="outline">
    <!-- rest of Code ommited for brevity -->

当我单击组件new中的按钮时workgroup，我希望它导航到savewg组件视图并替换组件中的内容workgroup。
任何关于我如何解决这个问题的建议将不胜感激

标签： javascriptangulartypescript

解决方案

每个模块只允许一个主router-outlet模块。您必须为workgroups路径创建一个单独的模块并延迟加载它。该workgroups模块将拥有自己的路由文件和自己的路由器出口，您将从workgroup模块中加载所有路由。 有关工作示例，请参见下面的 stackblitz。

应用程序路由.module.ts

const routes: Routes = [
  ...
  {
    path: 'workgroups',
    loadChildren: () => import('./workgroups/workgroups.module').then(m => m.WorkgroupsModule)
  },
  ...
];

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

工作组-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: WorkgroupsComponent,
    children: [
      {
        path: 'savewg',
        component: WgDetailsComponent
      },
      {
        path: '**',
        redirectTo: 'savewg',
        pathMatch: 'full'
      }
    ]
  },
  
];

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

工作组.module.ts

@NgModule({
  imports: [
    CommonModule,
    WorkgroupsRoutingModule
  ],
  declarations: [
    WorkgroupsComponent, 
    WgDetailsComponent
    ]
})
export class WorkgroupsModule { }

以下是延迟加载模块的资源和 stackblitz 示例。

https://stackblitz.com/edit/angular-ivy-hbogtn