时间戳

首页 > 解决方案 > Angular 7 添加 innerHTML 动态绑定

javascript - Angular 7 添加 innerHTML 动态绑定

问题描述

我正在尝试建立一个系统，该系统从存储的 html 文件加载 html 页面并使用 angular 呈现它。如何在这个文件中绑定属性和事件，我正在尝试用 innerHTML 注入它。

父组件.ts

genericAttribut ="Hello"

getHtmlContent(){
    id =1;
    this.service.getHtmlContent(id).subscribe((data)=>
    myTemplate =data;
});
}  
genericFunction(){
console.log("fire");
}

父组件.html

<div [innerHTML]="myTemplate | safeHtml"></div>

模板-1.html

<button (click)="genericFunction()">{{genericAttribut}}</button>

当我尝试这个时，角度不做绑定。

标签： javascripthtmlangulartypescriptdom

解决方案

模板-1.html

<button id="buttonId">Button Name</button>

父组件.ts

getHtmlContent(): void {
    id = 1;
    this.service.getHtmlContent(id).subscribe((data) => {
      myTemplate = data;

      // Call this after updating innerHtml content
      setTimeout(() => {
        let buttonElement = document.querySelector('#buttonId');
        if(buttonElement) {
          buttonElement.addEventListener('onclick', (event) => {
            this.genericFunction();
          })
        }
      }, 1000)
    });
  }
  genericFunction() {
    console.log("fire");
  }

相关 Angular 2 innerHTML（点击）绑定

推荐阅读