angular - 如何使用@Directive 处理点击事件？

Question

是否可以将 click 事件附加到 @Directive(不是 @Component)上或内部的元素？

例如，我有一个@Directive定义如下:

import { Directive, OnInit, Input, ElementRef, Renderer } from '@angular/core';
declare var $: any; // JQuery

@Directive({
    selector: '[gridStack]'
})
export class GridStackDirective implements OnInit {
    @Input() w: number;
    @Input() animate: boolean;

    constructor(
        private el: ElementRef,
        private renderer: Renderer
    ) {
        renderer.setElementAttribute(el.nativeElement, "class", "grid-stack");
    }

    ngOnInit() {
        let renderer = this.renderer;
        let nativeElement = this.el.nativeElement;
        let animate: string = this.animate ? "yes" : "no";

        renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
        if(animate == "yes") {
            renderer.setElementAttribute(nativeElement, "data-gs-animate", animate);
        }

        let options = {
            cellHeight: 80,
            verticalMargin: 10
        };

        // TODO: listen to an event here instead of just waiting for the time to expire
        setTimeout(function () {
            $('.grid-stack').gridstack(options);
        }, 300);
    }

}

在我使用 @Directive 的 HTML 中(在 index.html 中)，请注意我没有任何与 @Directive 关联的模板 本身，我可以包含一个 click 事件吗？:

<div gridStack>
    <div><a (click)="clickEvent()">Click Here</a></div>
</div>

我知道如果它是一个 @Component 就可以工作，但如果可能的话，我希望尝试让它与 @Directive 一起工作。

Answer 1

您可以通过指令定义中的 HostListener 装饰器附加到点击事件。例如:

@Directive({ selector: '[coolBehavior]' })
export class CoolBehaviorDirective {
    @HostListener('click', ['$event']) onClick($event){
        console.info('clicked: ' + $event);
    }
}

请参阅 Angular 文档 here

更多信息请参见 this question