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

99封情书 提交于 2021-02-07 19:51:46

问题


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>

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


回答1:


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.

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

then use

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

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

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

NOTE 3: remember to validate blogSelected.description before calling the http request to check it's actually a valid URL.



来源:https://stackoverflow.com/questions/47771061/angular-how-to-implement-ng-include-like-functionality-in-angular-5

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!