Angular:如何在Angular 5中实现类似ng-include的功能? [英] Angular: How to implement ng-include like functionality in Angular 5?

问题描述

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

Is there any functionality to render html file dynamically inside a components template based on the path? I have the path to local html file now I need to display the content of it inside a components template. In Anular 1.x we had ng-include, any similar functionality in Angular5?

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

变量 blogSelected.description 包含html文件的路径，我想在此处替换其内容.

variable blogSelected.description contains the path to html file and I want to replace its content here.

推荐答案

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

Okay so the only reasonably straight-forward way I can think of to do this is to use an http request to get the contents of the html file then use that in the [innerHtml] attribute.

私有dynamicTemplate:any =";http.get(blogSelected.description).map((html:any)=> this.dynamicTemplate = sanitizer.sanitize(html));

然后使用

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

注1: 请记住，将http作为此组件的依赖项包括在内.

NOTE 1: remember to include http as a dependency for this component.

注意2: 记得包括消毒剂作为该组件的依赖项

NOTE 2: remember to include sanitizer as a dependency for this component

注意3: :请记住在调用http请求以检查其是否为有效URL之前先验证 blogSelected.description .

这篇关于Angular:如何在Angular 5中实现类似ng-include的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！