Angular - HostListener 指令和传递值答案

【问题标题】：Angular - HostListener directive and pass valueAngular - HostListener 指令和传递值
【发布时间】：2020-08-21 07:49:41
【问题描述】：

我正在尝试使用“innerHTML”传递带有点击事件的 div。由于（点击）不起作用，我尝试使用 HostListener 来获取 id。但它似乎甚至不能在 innerHTML 中传递 id。

HTML 代码

<div [innerHTML]="show" detectClick></div>

主机监听器

@HostListener('click', ['$event.target.id']) onClick(id: any) {
    alert(`You clicked on ${id}`);
    this.test = id;
}

要动态添加的代码

this.show = this.sanitizer.bypassSecurityTrustHtml(`<div class="clickarea"><span id="123" (click)="showID('123');">x</span></div>`);

链接到StackBlitz

【问题讨论】：

我想你已经注意到它不会在 HTML 中呈现 id。也可以搜索DomSanitizer
感谢您的友好建议。我在 StackBlitz 中添加了 DomSanitizer，它现在显示 id 并且 HostListener 正在工作。但是 (click)="showID('123')" 仍然无法正常工作。任何想法如何解决这个问题？

标签： angular typescript innerhtml

【解决方案1】：

您不能在 innerHTML 中使用 Angular 特定属性，例如 (click) 或 [prop]。

但是是的，您可以通过@HostListener 装饰器使用事件委托来获得点击id：

detectclick.directive.ts

import { Directive, Output, HostListener, EventEmitter } from '@angular/core';

@Directive({selector: '[detectClick]'})
export class DetectClick {

  @Output() detectClick = new EventEmitter();

  @HostListener('click', ['$event.target.id']) onClick(id: any) {
    this.detectClick.emit(id);
  } 
}

parent.html

<div [innerHTML]="show" (detectClick)="showID($event)"></div>

Forked Stackblitz

【讨论】：

救命稻草。谢谢！