Angular - HostListener 指令和传递值

Posted 2023-05-07

【中文标题】Angular - HostListener 指令和传递值

【英文标题】：Angular - HostListener directive and pass value

【发布时间】：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')" 仍然无法正常工作。任何想法如何解决这个问题？

【参考方案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

【讨论】：

救命稻草。谢谢！