为原始 HTML 中的元素添加事件处理程序

Question

应用程序从外部 API 获取原始 HTML 字符串，我需要呈现此数据。还应添加 span id="sp1" 的 click 事件的处理程序。

阅读文章后：

app.component.ts

import { Component, ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private elementRef: ElementRef,
    private sanitizer: DomSanitizer
  ) {}

  myHtml;

  logInfo() {
    console.log('TEST clicked!');
  }

  getApiData() {
    // In prod the rawHtml value retrivied by external call
    var rawHtml = `<h2>What is Lorem Ipsum?</h2><span id="sp1">TEST</span>`;

    this.myHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
    var elem = this.elementRef.nativeElement.querySelector('#sp1');
    if (elem) {
      elem.addEventListener('click', this.logInfo.bind(this));
    }
  }
}

app.component.html

<div [innerHTML]="myHtml"></div>
<button (click)="getApiData()">Get API Data</button>

无效：

单击“获取 API 数据”按钮。
单击“测试”标签。
“已单击测试”文本未显示在控制台中。

我错过了什么？

Answer 1

你要等到DomSanitizer.bypassSecurityTrustHtml更新真正的DOM才可以搜索元素，例如：

getApiData() {
  // In prod the rawHtml value retrieved by external call
  var rawHtml = `<h2>What is Lorem Ipsum?</h2><span id="sp1">TEST</span>`;

  this.myHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  setTimeout(() => {
    var elem = this.elementRef.nativeElement.querySelector('#sp1');
    if (elem) {
      elem.addEventListener('click', this.logInfo.bind(this));
    }
  }, 0)
}

为原始 HTML 中的元素添加事件处理程序

Adding event handler for element from raw HTML

html

element

angular