1. 程式人生 > >AngularJS 2 中如何實現ng-bind-html

AngularJS 2 中如何實現ng-bind-html

問題:

在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>";
}