Angular 2 Ionic - 创建一个新指令

时间:2017-03-05 15:17:41

标签: angular typescript angularjs-directive ionic2 angular2-directives

我正在尝试为swipeUp对象创建一个新指令,所以 onSwipeUp="doThisFunction()"

这是一个其他人想要做同样事情的论坛: https://forum.ionicframework.com/t/unable-to-catch-vertical-swipe-drag-events/46380/4

这是我的app.module.ts

import { SwipeVertical } from '../directives/swipe-vertical.directive';
@NgModule({
      declarations: [
        SwipeVertical
      ]

这是我的家。

import { SwipeVertical } from "../../directives/swipe-vertical.directive.ts";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

在home.html中我将使用:

<img class="imgUser" (onSwipeUp)="getLike(user, $event)" [src]="user.imgLink">

我的指示swipe-vertical.directive.ts

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

@Directive({
    selector: '[swipe-vertical]'
})
export class SwipeVertical implements OnInit, OnDestroy {
    @Output() onSwipeUp = new EventEmitter();
    @Output() onSwipeDown = new EventEmitter();

    private el: HTMLElement;
    private swipeGesture: Gesture;
    //private swipeDownGesture: Gesture;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    ngOnInit() {
        this.swipeGesture = new Gesture(this.el, {
            recognizers: [
                [Hammer.Swipe, {direction: Hammer.DIRECTION_VERTICAL}]
            ]
        });
        this.swipeGesture.listen();
        this.swipeGesture.on('swipeup', e => {
            this.onSwipeUp.emit({ el: this.el });
        });
        this.swipeGesture.on('swipedown', e => {
            this.onSwipeDown.emit({ el: this.el });
        });
    }

    ngOnDestroy() {
        this.swipeGesture.destroy();
    }
}

错误

没有错误,但指令(onSwipeUp)不起作用.. 也许添加这样的部分? :

host: {
      "[onSwipeUp]": "SwipeUp" 
      }

非常感谢你的帮助!我很感激 路易斯:)

0 个答案:

没有答案