角度嵌套模块未加载嵌套路由器插座

Question

我有一个应用程序，其中有一个应用程序页面，其中显示了您可以查看的所有不同应用程序的列表，或者直接进入您根据权限可以访问的应用程序。我在一个名为 AppsModule 的模块中拥有所有这些，其中包含一个如下所示的路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthenticationGuard } from 'src/app/core/guards/authentication/authentication.guard';

import { AppsComponent } from './apps.component';

const routes: Routes = [
  {
    path: '', component: AppsComponent,
    canActivate: [AuthenticationGuard],
    canActivateChild: [AuthenticationGuard],
    children: [
      {
        path: 'users',
        loadChildren: () => import('../admin/user-management/user-management.module').then(m => m.UserManagementModule)
      },
      {
        path: 'books',
        loadChildren: () => import('../admin/book-managament/book-managament.module').then(m => m.BookManagamentModule)
      },
    ]
  },
];

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

在那个模块中，我有这样的 html：

<div class="container-fluid" *ngIf="router.url === '/apps'">
    <div class="row">
        <div class="col">
            <a [routerLink]="['books']" routerLinkActive="router-link-active">Books Application</a>
        </div>
        <div class="col">
            <a [routerLink]="['users']" routerLinkActive="router-link-active">Users</a>
        </div>
    </div>
</div>
<router-outlet *ngIf="router.url !== '/apps'"></router-outlet>

一旦你点击这些应用程序之一，一个模块就会被延迟加载，在模块中，我希望路由器插座在该模块的主要组件中包含导航，如下所示：

<app-navigation></app-navigation>
<router-outlet></router-outlet>

一切都编译得很好，但是当我使用提供的 url 加载该模块时，我得到了模块的主要组件，但没有显示导航组件。我的一切出口都很好。例如，如果我将导航组件放在应用程序模块而不是用户模块中，我可以使它工作。

似乎 angular 只允许两个路由器插座。不知道为什么我的应用导航组件没有正确加载任何帮助将不胜感激。