Wie Benutzer HostListener für benutzerdefinierte Elemente verwenden? (Winkel 2)

Question

kann ich HostListener für Dokument Zuhören verwenden:

@HostListener('document:click', ['$event']) 
someAction(event) { 
    console.log('done'); 
} 

Wie kann ich für click Veranstaltungen für Elemente hören. Zum Beispiel:

<span class="someClass"></span> 

Answer 1

Die Antwort von Gunter verwenden ist richtig, aber Sie können eine Richtlinie mit einem HostListener für mehr globalen Sinn der Nutzung (wie ein Favorit/Like-Button) machen.

@Directive({ 
selector: '.favorite' 
}) 
class FavoriteDirective(){ 
@HostListener('click', ['$event.target']) onClick(_element) { 
    ... 
    } 
} 

Answer 2

@HostListener('click', ['$event']) ist für Veranstaltungen auf dem Host-Elemente selbst zu hören. Es gibt keinen anderen Anwendungsfall, für den sie verwendet werden können. Eine Ausnahme sind globale Ereignisse, die Sie bei globalen Ereigniszielen wie window:, document: oder body verwendet haben.

zu hören auf beliebige Elemente

<span class="someClass" (click)="someAction($event)"></span>