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

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

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

假设我们有一个在他的模板中使用可拖动 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 方法无法访问 'this'(!!!) 所以我必须将“this”放在 'self' 中由边界返回的对象中（）方法。我不知道是什么原因 - 可能是 angular 导致的，或者可能是打字稿导致的问题...我不知道。

更新：

我认为如果我们将 MyComponent 中的行 onDragEnd: this.onDragEnd, 更改为

onDragEnd: (x,y,boundary) => this.onDragEnd(x,y,boundary),

然后我们将在 onDragEnd 中正常访问 this 并且解决方案实际上不会“脏”。

Answer 2

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

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 指令像这样使用此服务发送事件

globalEventService.emitEvent('some messsage')

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

Is there a way to emit event inside directive

javascript

events

angular2-directives

angular2-components

angular