用angular 4+编译服务响应的html并集成在模板中。
我们在后端使用Angular用于前端和其余api服务，该服务会返回一个HTML表，其中将click，dblclick函数添加到一些属性中。 需求： 我们向服务发送请求，服务返回带有功能的html表。 （这些函数在angular .ts文件中定义。） 我们将接收到的html集成到模板的html中，并且click函数应该起作用。
到目前为止考虑的解决方案： -使用$ Compile是一个选项，但是在angular 2之后不可用 -将JIT与AOT编译器一起使用，但我已经读过JIT编译器无法进行量产。 -现在有效的解决方法是：（我们遍历所有html元素，然后在该循环中将函数绑定到该作用域）
是否还有其他合适的方法来解决这一切？
template.html
<div id = "maintwo"></div>
template-component.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 \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)
}
答案 0 :(得分：0)
尝试使用html编译器组件https://www.npmjs.com/package/@codehint-ng/html-compiler。
使用此方法，您可以将简单的角度分量事件存储在其他数据库中。