Angular - Директива HostListener и значение передачи

Question

Я пытаюсь передать div с событием щелчка, используя 'inner HTML'. Поскольку (щелчок) не работал, я попытался использовать HostListener для получения идентификатора. Но, похоже, невозможно даже передать id во внутренний HTML.

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

Answer 1

Вы не можете использовать атрибуты Angular Speci c, такие как (click) или [prop] внутри innerHTML.

Но да, вы можете использовать делегирование событий через декоратор @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);
  } 
}

родитель. html

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

Разветвленный Stackblitz