Tengo la siguiente directiva:
import {Directive, HostListener, Output, EventEmitter} from '@angular/core'; @Directive({ selector: '[long-press]' }) export class LongPressDirective { private touchTimeout: any; @Output() longpress = new EventEmitter(); private rootPage: any; constructor() {} @HostListener('touchstart') touchstart():void { this.touchTimeout = setTimeout(() => { this.longpress.emit({}); }, 400); } @HostListener('touchend') touchend():void { this.touchEnd(); } @HostListener('touchcancel') touchcancel():void { this.touchEnd(); } private touchEnd():void { clearTimeout(this.touchTimeout); } }Uso esta directiva así:
//<ion-item (click)="open(item)" long-press (longpress)="select(item)"></ion-item> El problema es que me gustaría pasar la referencia real al elemento dom. Por lo general, con una directiva (clic), puedo hacer algo como: (click)="somefunc($event)" . Con mi directiva, quiero hacer (longpress)="select($event, item) ". Necesito esto para poder agregar un atributo al dom. (contenido editable). ¿Cómo modifico mi directiva de pulsación larga para pasar el evento $ como ya puedo hacer con (clic) fuera de la caja?
Puede inyectar $event en HostListener así:
@HostListener('touchstart', ['$event']) {...}aquí está el plunk: https://plnkr.co/edit/j852SpnyorLObg07qmo0
importar {Componente, NgModule, HostListener, Directiva, EventEmitter, Salida} desde '@angular/core' importar {BrowserModule} desde '@angular/platform-browser'
@Directive({ selector: '[myDir]' }) export class MyDir { @Output() myDir = new EventEmitter<any>(); @HostListener('click', ['$event']) onClick($event) { this.myDir.emit($event); } } @Component({ selector: 'my-app', template: ` <div> <h2 (myDir)="clicked($event)">hello</h2> </div> `, }) export class App { constructor() { } clicked($event) { console.log($event); } } @NgModule({ imports: [BrowserModule], declarations: [App, MyDir], bootstrap: [App] }) export class AppModule { }