首页 > 解决方案 > 无法将 html 文件调用到 Angular 8

问题描述

我正在将 html 模板集成到 Angular 8 中。我使用 CLI 创建了页眉、页脚和侧边栏组件,并将页眉、页脚和侧边栏 html 代码分别粘贴到组件中。然后我将它们调用到 app.component.html 文件中,如下所示:

<div id="main-wrapper">
    <app-header></app-header>
    <app-left-sidebar></app-left-sidebar>
    
    <app-footer></app-footer>
</div>

然后我在 src/ 命名视图中创建了一个静态文件夹。我已将所有 html 文件放入此文件夹中,例如 home.html、about.html、contact.html 等...现在,当我将 home.html 调用到 app.component.html 时,如下所示:

<div id="main-wrapper">
    <app-header></app-header>
    <app-left-sidebar></app-left-sidebar>
    <div *ngIf="pageSlug == 'home'" ng-include="../views/home.html"></div>
    <div *ngIf="pageSlug == 'about'" ng-include="../views/about.html"></div>
    <div *ngIf="pageSlug == 'contact'" ng-include="../views/contact.html"></div>
    <app-footer></app-footer>
</div>

但包括上述路径不起作用。任何人都让我知道如何实现这一点,而且我想知道这种集成 html 模板的正确方法是这样,还是我们需要为所有像 home 组件、关于组件和联系组件的组件创建组件。

在此先感谢您的时间。

标签: angular8

解决方案


推荐阅读