0

Я использую 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> 
+0

Какой тип события вы хотите испустить здесь? –

+0

случай, когда пользователь останавливает элемент –

ответ

0

Я нашел рабочее решение, но несчастливо немного грязный обходной путь:

Скажем, у нас есть компонент, который использует 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> 

И из директивы будет выглядеть:

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

Грязное дело в том, что метод MyComponent.onDragEnd не имеют доступа к «это» (!!!), так Я должен поставить «это» в «я» в объект, перенастроенный методом border(). Я не знаю, в чем причина - могут быть угловатые причины, которые, или могут быть машинописными причинами, что проблема ... я не знаю.