有沒有一種方法來發射事件中指令

Question

我用Angular2和拖放（在某些限定區域）寫一些@Directive，想拖動時發出事件結束 - 所以當拖動到底是我調用方法endDragging。 1.這個方法的主體應該是什麼樣的？2.這個指令的用法應該如何（特別是如何將eventHandler設置爲指令）。

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

在HTML模板（??? =如何設定爲可拖動，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> 

而且出指令將看起來像：

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

骯髒的事情是，MyComponent.onDragEnd方法沒有「這個」（！），所以訪問我必須將「this」放在由「邊界（）」方法調用的對象中。我不知道是什麼原因 - 可能是角度原因，或者可能是打字稿導致這個問題......我不知道。