在 Angular 6 中编译 HTML

Posted 2023-05-07

【中文标题】在 Angular 6 中编译 HTML

【英文标题】：Compile HTML in Angular 6

【发布时间】：2019-06-20 00:21:11

【问题描述】：

在 Angular 4+ 中编译服务响应的 html 并集成到模板中。

我们在前端使用 Angular 并在后端使用 rest api 服务，该服务返回给我们一个带有 click 的 html 表，dblclick 函数添加到一些属性。 要求： 我们向服务发送请求，服务返回添加了功能的 html 表。 （这些函数在 angular .ts 文件中定义。） 我们将收到的 html 集成到模板的 html 中，点击功能应该可以工作。

目前考虑的解决方案： - 使用 $Compile 是一个选项，但它在 angular 2 之后不可用 - 将 JIT 与 AOT 编译器一起使用，但我读过 JIT 编译器不会进行生产构建。 - 现在有效的解决方法是：（我们循环遍历所有 html 元素并将函数绑定到该循环中的此范围）

还有其他合适的、不那么凌乱的方法吗？

template.html

<div id = "maintwo"></div>

模板组件.ts：

ngOnInit()  
     document.querySelector('#maintwo').innerHTML = decodeURIComponent("<table cellspacing=\"0\" class=\"x-panel-body x-grid-body x-panel-body-default x-box-layout-ct x-panel-body-default x-pivot-table\">\r\n\t<thead>\r\n\t\t<tr class=\"generic-row-style   even-row\">\r\n\t\t\t<th class=\"x-column-header-inner x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left x-pivot-header\">\r\n\t\t\t\t&nbsp;\r\n\t\t\t</th>\r\n\t\t\t<th class=\"x-column-header-inner x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left x-pivot-header\" ondblclick=\"javascript:Sbi.olap.eventManager.setCalculatedFieldParent('[Measures].[Amount processed]','0')\">\r\n\t\t\t\tAmount processed\r\n\t\t\t</th>\r\n\t\t\t<th class=\"x-column-header-inner x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left x-pivot-header\" ondblclick=\"javascript:Sbi.olap.eventManager.setCalculatedFieldParent('[Measures].[Amount requested]','0')\">\r\n\t\t\t\tAmount requested\r\n\t\t\t</th>\r\n\t\t\t<th class=\"x-column-header-inner x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left x-pivot-header\" ondblclick=\"javascript:Sbi.olap.eventManager.setCalculatedFieldParent('[Measures].[Query CM]','0')\">\r\n\t\t\t\tQuery CM\r\n\t\t\t</th>\r\n\t\t</tr>\r\n\t</thead>\r\n\t<tbody>\r\n\t\t<tr class=\"generic-row-style   even-row\">\r\n\t\t\t<th class=\"x-column-header-inner x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left x-pivot-header collapsed\" ondblclick=\"javascript:Sbi.olap.eventManager.setCalculatedFieldParent('[Dim date.All Dim date].[All Dim date]','1')\" style=\"padding-left: 0px;\">\r\n\t\t\t\t<img onclick=\"myFunction()\" src=\"../img/plus.gif\">\r\n\t\t\t\t\tAll Dim date\r\n\t\t\t\t</th>\r\n\t\t\t\t<td id=\"0!1!1!706\" class=\"x-grid-cell x-grid-td x-grid-cell-gridcolumn-1014 x-unselectable x-grid-cell-inner  x-grid-row-alt x-grid-data-row x-grid-with-col-lines x-grid-cell x-pivot-cell  even-column\" ondblclick=\"javascript:Sbi.olap.eventManager.makeEditable('0!1!1!706','Amount processed')\">\r\n\t\t\t\t\t417\r\n\t\t\t\t</td>\r\n\t\t\t\t<td id=\"1!1!2!729\" class=\"x-grid-cell x-grid-td x-grid-cell-gridcolumn-1014 x-unselectable x-grid-cell-inner  x-grid-row-alt x-grid-data-row x-grid-with-col-lines x-grid-cell x-pivot-cell  odd-column\" ondblclick=\"javascript:Sbi.olap.eventManager.makeEditable('1!1!2!729','Amount requested')\">\r\n\t\t\t\t\t48\r\n\t\t\t\t</td>\r\n\t\t\t\t<td id=\"2!1!3!736\" class=\"x-grid-cell x-grid-td x-grid-cell-gridcolumn-1014 x-unselectable x-grid-cell-inner  x-grid-row-alt x-grid-data-row x-grid-with-col-lines x-grid-cell x-pivot-cell  even-column\" ondblclick=\"javascript:Sbi.olap.eventManager.makeEditable('2!1!3!736','Query CM')\">\r\n\t\t\t\t\t517\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n");        



myFunction(stringx)
    console.log("POC Succesful",stringx)

【问题讨论】：

您应该使用 [innerHtml] 模板绑定。为什么要从 BE 获取 FE 函数？

@JonasPraem innerhtml 中提供的任何内容都不会从角度编译。

谁能回答？

【参考方案1】：

尝试使用html编译器组件https://www.npmjs.com/package/@codehint-ng/html-compiler。

有了这个，您可以将简单的角度组件事件存储在其他数据库中。