如何在延迟加载的功能模块中创建子路由器插座？

Question

所以，我有一个 Angular 8 应用程序，它由以下项目结构组成：

app-routing.module.ts 包含延迟加载模块auth 和dashboard 的主要路由。 app.component 包含发生主路由的router-outlet。这工作正常。

但是，我想要的是有一个 dashboard.page 将包含导航栏、侧边栏等组件，另一个 router-outlet 将根据辅助路由更改组件。例如，/dashboard 应该带我到dashboard.page，因为app.component 中的主路由器。 /dashboard/new 应该带我到 dashboard.page 并且在其中，子路由器插座上应该有 temp.screen，这将根据我在侧边栏上单击的内容而改变。

到目前为止，当我延迟加载模块时，这不起作用。如果我急切地自己加载页面组件，那么整个流程就可以完美运行。即使在延迟加载的格式中，有没有办法让它工作？

dashboard-routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CommonModule } from "@angular/common";
import { DashboardPage } from "./page/dashboard.page";
import { TempTwoScreen } from "./screens/temp-two/temp-two.screen";
import { TempScreen } from './screens/temp/temp.screen';

const routes: Routes = [
    {
        path: "",
        component: DashboardPage,
        children: [
            {
                path: "",
                component: TempScreen,
                outlet: "dboard",
            },
            {
                path: "new",
                component: TempTwoScreen,
                outlet: "dboard",
            },
        ],
    },
];

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

app-routing.module.ts

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

const APP_ROUTES: Routes = [
    {
        path: "",
        loadChildren: () => import("./modules/auth/auth.module").then((m) => m.AuthModule),
    },
    {
        path: "dashboard",
        loadChildren: () => import("./modules/dashboard/dashboard.module").then((m) => m.DashboardModule),
    },
];

@NgModule({
    imports: [RouterModule.forRoot(APP_ROUTES, { enableTracing: true, relativeLinkResolution: "corrected" })],
    exports: [RouterModule],
})
export class AppRoutingModule {}

dashboard.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { IndexScreen } from "./screens/index/index.screen";
import { DashboardRoutingModule } from "./dashboard-routing.module";
import { DashboardPage } from "./page/dashboard.page";
import { TempScreen } from "./screens/temp/temp.screen";
import { TempTwoScreen } from "./screens/temp-two/temp-two.screen";
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        DashboardPage,

        TempTwoScreen,
        TempScreen,
        IndexScreen,
    ],
    imports: [CommonModule, DashboardRoutingModule, FormsModule],
    exports: [],
    providers: [],
})
export class DashboardModule { }

Answer 1

您会注意到下面我的文件中的第一件事是在仪表板模块的 app-routing.module.ts 文件中，我没有给出任何路径。我在 dashboard-routing.module.ts 中给出了 /dashboard 路径（这是因为对于其他子链接我不想要 /dashboard 在 URL 中添加前缀）但我也测试了你的方式，它对我有用。

其次，我是延迟加载子模块，这没有任何区别。

第三，我正在使用一个概览组件，该组件加载在 dashboard.component.html 的 router-outlet 内的 /dashboard 路径上

下面的代码是我目前在 Angular 8.2 项目中使用的工作代码。

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { AuthGuard } from "./guards/auth.guard";

const routes: Routes = [
  { path: "", pathMatch: "full", redirectTo: "/login" },
  { path: "login", component: LoginComponent },
  {
    path: "",
    loadChildren: () =>
      import("./dashboard/dashboard.module").then(m => m.DashboardModule),
    canLoad: [AuthGuard]
  },
  {
    path: "**",
    redirectTo: ""
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: true,
      relativeLinkResolution: "corrected"
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

dashboard-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { DashboardComponent } from "./dashboard.component";
import { OverviewComponent } from "./overview/overview.component";

const routes: Routes = [
  {
    path: "",
    component: DashboardComponent,
    children: [
      {
        path: "dashboard",
        component: OverviewComponent
      },
      {
        path: "profile",
        loadChildren: () =>
          import("./profile/profile.module").then(m => m.ProfileModule)
      },
      {
        path: "roles",
        loadChildren: () =>
          import("./roles/roles.module").then(m => m.RolesModule)
      },
      {
        path: "users",
        loadChildren: () =>
          import("./users/users.module").then(m => m.UsersModule)
      },
      {
        path: "products",
        loadChildren: () =>
          import("./products/products.module").then(m => m.ProductsModule)
      },
      {
        path: "orders",
        loadChildren: () =>
          import("./orders/orders.module").then(m => m.OrdersModule)
      },
      {
        path: "**",
        redirectTo: "dashboard"
      }
    ]
  }
];

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

在我的 dashboard.component.html 我使用 routerLink 作为

...
<li *ngIf="role.Orders.Read" nz-menu-item nzMatchRouter routerLink="/orders" style="outline: none !important">
  <i nz-icon nzType="shopping-cart"></i>
  <span><a class="text-white">ORDERS</a></span>
</li>
...