来自主要组件的角度延迟加载模块答案

【问题标题】：Angular lazy load modules from main component来自主要组件的角度延迟加载模块
【发布时间】：2020-07-24 23:53:55
【问题描述】：

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

app.component.html

<router-outlet></router-outlet>

modules/core/components/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的router-outlet，其他组件显示在router-outlet app.component.html

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

【问题讨论】：

标签： javascript angular typescript ecmascript-6 single-page-application

【解决方案1】：

当我访问 localhost:4200/campaigns 或 localhost:4200/dashboard 活动模块的组件已显示，但未使用他们父母的（home.component.html）视图

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

【讨论】：

我从 children 属性中删除了该对象。现在，当我访问 localhost:4200 时，我按预期获得了 home 组件的视图。但是，当我访问 localhost:4200/dashboard 时，我只获得仪表板视图，而不是主组件视图中的仪表板视图。
你应该为那个模块定义主路由
对不起，我不明白你的意思。你指的是哪个模块？ “那个模块”
我的意思是你必须为仪表板模块定义一个子路由
我在仪表板模块中有一个子路由。但导致问题的是活动模块的路由模块中的无效配置。修复了这个问题，页面 /dashboard 和 /campaigns 现在可以正确加载。非常感谢您的帮助。