是否有方法在指令中发出事件？
是否有方法在指令中发出事件？
提问于 2016-12-08 08:48:22
我使用Angular2并编写一些带有拖放(在某个有界区域)的@指令，并希望在拖放结束时发出事件--所以当拖放结束时，我调用方法endDragging。1.这个方法的主体应该是什么样子？，2.这个指令的用法应该是什么样的(特别是如何将eventHandler设置为指令)。
@Directive({
selector: '[draggable]'
})
export class Draggable {
@Input('draggable') boundary: any;
...
endDraging() {
// ??? how emit event from here?
}
}在html模板中(用于可拖尾拖放事件的？？？=how集处理程序)：
<div [draggable]="{x_min:10, x_max:100, y_min:20, y_max:200}" ...???... >
...some content...
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-19 00:24:00
您可以使用全局事件定义服务，并在指令中使用它。
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 => { … })指令使用此servis发送事件时，如下所示
globalEventService.emitEvent('some messsage')Stack Overflow用户
发布于 2016-12-09 06:26:50
我找到了一些解决办法，但不幸的是，这是一个有点肮脏的解决办法：
假设我们在模板中使用可拖式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“中，并将其放在由边界()方法重新调整的对象中。我不知道原因是什么-可能是棱角分明的原因，也可能是打字造成的问题.我不知道。
更新：
我认为如果我们将MyComponent中的行MyComponent改为
onDragEnd: (x,y,boundary) => this.onDragEnd(x,y,boundary),这样我们就可以正常地访问this内部的onDragEnd，并且解决方案实际上不会“脏”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41044646
复制相关文章
相似问题
腾讯云开发者
