Angular2：从数组中注入 HTML 并渲染视图

Posted 2023-05-07

【中文标题】Angular2：从数组中注入 HTML 并渲染视图

【英文标题】：Angular2 : Inject HTML from an array and render the view

【发布时间】：2017-10-20 13:27:38

【问题描述】：

我构建了一个基本的拖放功能，其中包含各种准备好的 html，您可以将它们拖放到页面中。

我有一个可以拖动的 HTML 列表的对象

element=[
 text: html: '<p> asdasdasdas</p>',
 list: html: '<ul><li></li></ul>';
 img: html: '<img src="placeholder.jpg"/>'
]

如何将html注入页面？

或者我应该将 HTML sn-ps 创建为组件，而不是在元素对象中引用组件选择器并注入角度选择器并渲染视图？

【参考方案1】：

可以使用ng-bind-html来绑定html

<div ng-bind-html="element.text.html"></div>
<div ng-bind-html="element.list.html"></div>
<div ng-bind-html="element.img.html"></div>

注意：您必须在您的应用中包含 ngSanitize 模块才能使用 ng-bind-html

【讨论】：

如果我在那个 HTML 中有 angular 类并绑定 HTML 会发生什么情况，它还会绑定事件侦听器吗？

您必须将 $sce 注入您的控制器，然后使用 trustAsHtml 函数设置您的 html。示例：$scope.htmlText = $sce.trustAsHtml($scope.element.text.html)

$scope 是 angular 1，我说的是 angular 2 哥们:)

好的，看看这个帖子：***.com/questions/32340641/…