Angular 从主组件延迟加载模块

Question

我的 app.routing.module.ts 中有以下设置。

app.component.html

<router-outlet></router-outlet>

模块/核心/组件/home/home.component.html

<mat-sidenav-container autosize>
<mat-sidenav #sidenav role="navigation">
    <!--this is a place for us to add side-nav code-->
    <wn-sidenav-list (sidenavClose)="sidenav.close()"></wn-sidenav-list>
</mat-sidenav>
<mat-sidenav-content>
    <!--in here all the content must reside. We will add a navigation header as well-->
    <wn-header (sidenavToggle)="sidenav.toggle()"></wn-header>
    <main>
        <!-- I want the components child components of the home components to be loaded here -->
        <router-outlet></router-outlet>
    </main>
    <wn-footer></wn-footer>
</mat-sidenav-content>

问题

当我访问 localhost:4200/campaigns 或 localhost:4200/dashboard 时，会显示它们各自的组件，但它们没有使用其父级 (home.component.html) 视图

我的目标

我希望 home 组件的所有子组件都显示在home.component.html 的路由器出口中，其他组件将显示在app.component.html 的路由器出口中

我以前有过这样的设置，但当时我没有使用模块，它运行良好。 延迟加载有什么我不明白的吗？

Answer 1

当我访问 localhost:4200/campaigns 或 localhost:4200/dashboard 时，会显示活动模块的组件，但它们没有使用其父级 (home.component.html) 视图

在您的路线配置中，您使用的是redirectTo:'/dashboard'所以这就是为什么您会看到活动模式的视图