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 dynamicTemplate: any = ""; http.get(blogSelected.description).map((html:any) => this.dynamicTemplate = sanitizer.sanitize(html));

然后使用

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

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

注意 2： 记得将消毒剂作为该组件的依赖项包含在内

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

Angular: How to implement ng-include like functionality in Angular 5?