Angular 如何使用指令长按Ionic2

Angular 如何使用指令长按Ionic2,angular,ionic-framework,ionic2,angular-directive,Angular,Ionic Framework,Ionic2,Angular Directive,我刚开始用angular编程,如果问题简单或问得不好,我深表歉意 我有一个自定义指令LongPressDirective.ts import { Directive, ElementRef, OnInit, OnDestroy ,Output , EventEmitter } from '@angular/core'; import { Gesture } from "ionic-angular/gestures/gesture"; declare let Hammer: any @Dir

我刚开始用angular编程,如果问题简单或问得不好,我深表歉意

我有一个自定义指令LongPressDirective.ts

import { Directive, ElementRef, OnInit, OnDestroy ,Output , EventEmitter } 
from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";
declare let Hammer: any


@Directive({
 selector: '[long-press]' // Attribute selector

})
export class LongPressDirective implements OnInit, OnDestroy{
el: HTMLElement;
  pressGesture: Gesture;
@Output('long-press') onPressRelease: EventEmitter<any> = new 
EventEmitter();
//Hammer: any

 constructor(el: ElementRef) {
this.el = el.nativeElement;
console.log('Hello LongPressDirective Directive'); 
}

ngOnInit() {
//this.pressGesture = new Gesture(this.el);
this.pressGesture = new Gesture(this.el, {
recognizers: [
  [Hammer.Press, {time: 1000}]

]
 });
this.pressGesture.listen();

this.pressGesture.on('press', (event) => {
  console.log('pressed!!');
  this.onPressRelease.emit('released');
});


}

ngOnDestroy() {
this.pressGesture.destroy();
}
}
import{Directive,ElementRef,OnInit,ondestory,Output,EventEmitter}
从“@angular/core”开始;
从“ionic angular/Sirters/Sirter”导入{Sirter};
声明:有吗
@指示({
选择器:“[长按]”//属性选择器
})
导出类LongPress指令实现OnInit、OnDestroy{
el:HTMLElement;
按手势:手势;
@按释放时的输出('long-press'):EventEmitter=new
EventEmitter();
//哈默:有吗
构造函数(el:ElementRef){
this.el=el.nativeElement;
log('Hello LongPressDirective');
}
恩戈尼尼特(){
//this.press手势=新手势(this.el);
this.press手势=新手势(this.el{
识别器:[
[Hammer.Press,{时间:1000}]
]
});
这个。按手势。听();
this.press手势.on('press',(事件)=>{
console.log('pressed!!');
此.onPressRelease.emit('released');
});
}
恩贡德斯特罗(){
这个。按手势。销毁();
}
}
我已在app.module.ts中导入此指令

在my HTML中,以相同的模式使用此选项:

<div #detailB *ngIf = "condition" class = "imgDetailBlur" [ngStyle]=" 
{'background-image': 'url('path')'}" id="detailB" (long-press)="clearImage()" >

但在长期的压力下不工作 尝试在app.module.ts和单个模块中导入che指令,但不工作

我在此模式下解决:

创建新的模块SharedModule.ts

import { NgModule } from '@angular/core';
import { LongPressDirective } from '../directives/long-press/long-press';

@NgModule({
   declarations: [
   LongPressDirective
  ],
exports: [
   LongPressDirective
  ]
})
export class SharedModule {

 }
在此模块中,我声明并导入了自定义指令“LongPressDirective”


现在在其他模块中使用SharedModule并开始工作

我对ionic不太了解,也许看看我测试过的,它可以工作这里有一个ionic长压集成的例子