構造ディレクティブのHostListenerを使用

Question

属性ディレクティブのように、ホスト上のイベントをリッスンする必要がある構造ディレクティブがあります。

指示文に@HostListenerを使用する際にエラーはありませんが、イベントは受信されません。

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

import { TemplateRef, ViewContainerRef } from '@angular/core'; 

@Directive({ selector: '[myUnless]' }) 
export class UnlessDirective { 

constructor(
    private templateRef: TemplateRef<any>, 
    private viewContainer: ViewContainerRef 
    ) { } 

@HostListener("click", ["$event"]) public onClick(event: any) { 
     console.log("click", event); 
} 

@Input() set myUnless(condition: boolean) { 
    if (!condition) { 
    this.viewContainer.createEmbeddedView(this.templateRef); 
    } else { 
    this.viewContainer.clear(); 
    } 
} 
} 

とテンプレート：：

<h1>Structural Directive with HostListener</h1> 


<p *myUnless="condition"> 
condition is false and myUnless is true. 
</p> 

<p *myUnless="!condition"> 
condition is true and myUnless is false. 
</p> 

plunker example

は、それが構造的なディレクティブで@HostListenerを使用することが可能かどう質問があるもあります。ここ

は、ディレクティブコードです？

Answer 1

@HostListener作品が、のようなhtmlタグをコメントに適用されています：それは接続されていますので、そう

@Directive({ selector: '[myUnless]' }) 
export class UnlessDirective { 

    constructor(
    private templateRef: TemplateRef<any>, 
    private viewContainer: ViewContainerRef, 
    private renderer: Renderer) { } 

    onClick(event: any) { 
    console.log("click", event); 
    } 

    @Input() set myUnless(condition: boolean) { 
    if (!condition) { 
     this.viewContainer.createEmbeddedView(this.templateRef); 

     const el = this.templateRef.elementRef.nativeElement.nextElementSibling; 
     this.renderer.listen(el, 'click', this.onClick); 
    } else { 
     this.viewContainer.clear(); 
    } 
    } 
} 

Plunker