美文网首页
AngularJS 2 中如何实现ng-bind-html

AngularJS 2 中如何实现ng-bind-html

作者: 飞鱼YE | 来源:发表于2017-05-23 21:54 被阅读0次

    原文作者:哈喽吕小强
    原文地址:http://www.lvhongqiang.com/blog425.html

    问题:

    在AngularJS 1.x 中可以使用ng-bind-html来插入一段html代码,相当于struts2 <s:property>标签的escape属性。但是AngularJS 2中取消了ng-bind-html,当项目中确实有需要动态插入html代码的时候我们该怎么做呢?

    解决方法:

    使用[innerHtml]代替ng-bind-html。
    innerHtml属性,用于设置标签内的html,[innerHtml]=”data.title”用于动态将AngularJS 2的变量值赋给innerHtml属性,以实现ng-bind-html的效果。

    完整示例:

    search.component.html

    <a href="#" target="_blank" [innerHtml]="data"></a>
    

    search.component.ts

    export class SearchComponent {
        private data: string = "<b>helloWorld</b>";
    }
    

    相关文章

      网友评论

          本文标题:AngularJS 2 中如何实现ng-bind-html

          本文链接:https://www.haomeiwen.com/subject/aiggxxtx.html