javascript - Angular:如何在 Angular 5 中实现类似 ng-include 的功能？

Question

是否有任何功能可以根据路径在组件模板中动态呈现 html 文件？我有本地 html 文件的路径，现在我需要在组件模板中显示它的内容。在 Anular 1.x 中我们有 ng-include，Angular5 中有类似的功能吗？

<div class="row blogdetail-container">
        {{blogSelected.description}} // currently interpolates the path
</div>

变量 blogSelected.description 包含 html 文件的路径，我想在这里替换它的内容。

Answer 1

好的，所以我能想到的唯一合理直接的方法是使用 http 请求获取 html 文件的内容，然后在 [innerHtml] 属性中使用它。

私有(private)动态模板:任何=“”； http.get(blogSelected.description).map((html:any) => this.dynamicTemplate = sanitizer.sanitize(html));

然后使用

<div class="row blogdetail-container" [innerHtml]="dynamicTemplate"></div>

注意 1:请记住将 http 作为此组件的依赖项。

注意 2:请记住将 sanitizer 作为该组件的依赖项包含在内

注意 3:记得在调用 http 请求之前验证 blogSelected.description 以检查它实际上是一个有效的 URL。