Comment gérer les événements de clic avec @Directive angular2?
Est-il possible de joindre cliquez sur les événements à l'élément ou à l'intérieur d'une directive? (pas de composant) Par exemple.. j'ai une directive définie comme suit:
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);
}
}
Dans le code html où j'utilise cette directive (index.html, notez que je n'ai pas de modèle associé à l' @la directive elle-même, puis-je inclure un événement de clic?:
<div gridStack>
<div><a (click)="clickEvent()">Click Here</a></div>
</div>
Je sais que cela fonctionne si elle est une composante, mais je suis à la recherche d'essayer de le faire fonctionner avec une directive si c'est possible.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez joindre à l'événement click via
HostListener
décorateur dans votre définition de la directive. Par exemple:Voir l'angle de docs ici
Et quelques infos en cette question