Question

我使用Angular2并使用拖放（在某些有界区域中）写一些@Directive并且想要在拖动结束时发出事件 - 所以当拖动结束时我调用方法endDragging。 1.这个方法的主体应该是什么样的？，2。该指令的用法应该如何（特别是如何将eventHandler设置为指令）。

@Directive({
    selector: '[draggable]'
})
export class Draggable {
    @Input('draggable') boundary: any;
    ...
    endDraging() {
        // ??? how emit event from here?
    }
}

在html模板中（??? =如何设置draggable-endDragging事件的处理程序）：

<div [draggable]="{x_min:10, x_max:100, y_min:20, y_max:200}" ...???... >
...some content...
</div>

Answer 1

您可以使用全局事件定义服务，并在指令中使用

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class GlobalEventService {

    private eventSubject = new ReplaySubject<string>(1);

    constructor() { }

    public getEventObservable() {
        return this.eventSubject.asObservable();
    }

    public emitEvent(message) {
        this.eventSubject.next(message);
    }
}

代码太过头了，可能包含错误。在外面有人在做

globalEventService.getEventObservable().subscribe(message => { … })

while指令使用这样的servis发送事件

globalEventService.emitEvent('some messsage')

Answer 2

我找到了一些有效的解决方案但不幸的是有点肮脏的解决方法：

假设我们在他的模板中有使用draggable div的组件：

@Component({
    selector: 'my-component',
    templateUrl: './my-component.html',
    directives: [ Draggable ],
})
export class MyComponent {

    myVariable = 0;    

    boundary() {
        return {
            x_min:10, 
            x_max:100, 
            y_min:20, 
            y_max:200,
            self: this, 
            onDragEnd: this.onDragEnd,
        };
    }

    onDragEnd(x,y,boundary) {
       // handle drag end event, to get acces to 'this' (instance of MyComponent class use boundary.self)
       boundary.self.myVariable = 1;
    }

}

在模板.html中我们有：

<div [draggable]="boundary()">...</div>

out指令看起来像那样：

@Directive({
    selector: '[draggable]'
})
export class Draggable {
    @Input('draggable') boundary: any;
    ...
    endDraging() {
        this.boundary.onDragEnd(this.x,this.y, this.boundary);
    }
}

肮脏的是MyComponent.onDragEnd方法无法访问＆＃39;（!!!）所以我必须把＃34;这个＆＃34;在＆＃39; self＆＃39;在通过boundary（）方法重新调整的对象中。我不知道是什么原因 - 可能是角色原因，或者可能是打字稿引起的问题...我不知道。

有没有办法在指令内发出事件

2 个答案: