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

Question

我使用angular2并用拖放（在某些边界区域）编写一些@Directive，并且在拖动结束时想要发射事件 - 因此，当拖动结束时，我调用方法endragging。1.此方法的主体应该是如何？

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

在html模板中

<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 => { … })

指令使用此服务发送事件

globalEventService.emitEvent('some messsage')

Answer 2

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

说我们的组件在他的模板中使用可拖动的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"在用边界（）方法重新调整的对象中的"自我"中。我不知道是什么原因 - 可能是角度的原因，或者可能是打字的原因...我不知道。

更新：

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

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

那么，我们将在onDragEnd内部正常访问this，而解决方案实际上不是"脏"。