码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-12-15 01:03:31      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:escape   html   如何   效果   link   href   完整   esc   innerhtml   

问题:

在AngularJS 1.x 中可以使用ng-bind-html来插入一段html代码,相当于struts2 标签的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>";
    }

 转自:http://www.lvhongqiang.com/blog425.html

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

标签:escape   html   如何   效果   link   href   完整   esc   innerhtml   

原文地址:http://www.cnblogs.com/lhq1/p/6181655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!