Question

我有以下指令：

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);
  }
}

我像这样使用这个指令：

//<ion-item (click)="open(item)" long-press (longpress)="select(item)"></ion-item>

问题是，我想将实际引用传递给dom元素。通常使用（click）指令，我可以执行以下操作：(click)="somefunc($event)"。根据我的指示，我想做(longpress)="select($event, item)＆＃34;。我需要这个，以便我可以添加一个属性到dom。（CONTENTEDITABLE）。如何修改我的long-press指令以传递$ event，就像我已经开始使用（click）一样？

Answer 1

您可以将$ event注入HostListener：

@HostListener('touchstart', ['$event']) {...}

这是插件：https://plnkr.co/edit/j852SpnyorLObg07qmo0

从＆＃39; @ angular / core＆＃39;导入{Component，NgModule，HostListener，Directive，EventEmitter，Output} 从＆＃39; @ angular / platform-browser＆＃39;

导入{BrowserModule}

@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 {
}

如何传递点击角度为2/4的dom元素？

1 个答案: