typescript - Angular - HostListener direktiva i prosljeđivanje vrijednosti

Pokušavam proslijediti div s događajem klika koristeći 'innerHTML'. Budući da (click) nije radio, pokušao sam koristiti HostListener za dobivanje id-a. Ali čini se da ne mogu niti proslijediti id u innerHTML.

HTML kod

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

Domaćin slušatelj

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

Kod koji će se dinamički dodavati

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

Veza na StackBlitz

Odgovor #1

Ne možete koristiti Angular specifične atribute poput (click) ili [prop] unutar innerHTML.

Ali da, možete koristiti delegiranje događaja kroz @HostListener dekorator da biste dobili kliknuti 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>

Forkan Stackblitz