angular 8 innerhtml click event

对于 Angular 8 中 innerHTML 元素的点击事件,您可以尝试以下几个步骤:

  • 首先在 HTML 模板中设置一个具有特定 ID 的 DIV 元素:
  • <div id="myDiv" [innerHTML]="myHtmlContent"></div>
    
  • 接下来,您需要使用 ViewChild 装饰器来获取该 DIV 元素的引用:
  • import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      styleUrls: ['./my-component.component.css']
    export class MyComponent implements AfterViewInit {
      @ViewChild('myDiv') myDiv: ElementRef;
      ngAfterViewInit(): void {
        const divElement = this.myDiv.nativeElement;
        // 在这里绑定点击事件
        divElement.addEventListener('click', () => {
          console.log('Clicked on div!');
    
  • 在组件的 ngAfterViewInit() 生命周期钩子函数中,使用 nativeElement 属性获取该 DIV 元素的本地引用,并绑定点击事件。
  • 这样,当用户点击该 DIV 元素时,控制台将记录 "Clicked on div!" 消息。

    希望这个解答可以帮到您。

  •