Требуется ли ElementRef, чтобы получить dragstart DragEvent в Angular 2?

В этом разделе https://gist.github.com/gatimus/5abe1fb2ef45f26657ed6843902b872b Я слушаю событие dragstart на 2 элемента. Один с угловым синтаксисом 2 и один с родным ссылкой на элемент. Только добавление прослушивателя событий с помощью ссылки на родные элементы я смог получить DragEvent с свойством dataTransfer. ElementRef считается угрозой безопасности, и, похоже, вы должны быть в состоянии выполнить то же самое с синтаксисом привязки событий Angular 2. ElementRef требуется, чтобы получить dragstart DragEvent в Angular 2 и это ошибка Angular 2?Требуется ли ElementRef, чтобы получить dragstart DragEvent в Angular 2?

import { Component, OnInit, ElementRef } from '@angular/core'; 

@Component({ 
    template: ` 
     <!-- native element reference --> 
     <div id="source0" 
      style="background-color: red; height: 20px;" 
      draggable="true"> 
     </div> 

     <!-- angular 2 template syntax --> 
     <div id="source1" 
      style="background-color: green; height: 20px;" 
      draggable="true" 
      (dragstart)="dragStart($event)"> 
     </div> 
    ` 
}) 
export class DragAndDropComponent implements OnInit { 

    public source0: HTMLElement; 

    constructor(private _elementRef: ElementRef) { } 

    // native element reference 
    ngOnInit() { 
     this.source0 = (<HTMLElement>(<HTMLElement>this._elementRef.nativeElement).children[0]); 
     this.source0.addEventListener('dragstart', (event) => { 
      console.log('source0', event); // DragEvent with dataTransfer property 
      event.dataTransfer.effectAllowed = 'move'; // No error 
      event.dataTransfer.setData('text/plain', 'test'); // No error 
     }); 
    } 

    // angular 2 template syntax 
    dragStart(event: DragEvent) { 
     console.log('source1', event); // Object with MouseEvent for srcEvent 
     event.dataTransfer.effectAllowed = 'move'; // Cannot set property 'effectAllowed' of undefined 
     event.dataTransfer.setData('text/plain', 'test'); //Cannot read property 'setData' of undefined 
    } 

}

Edit: Оказывается, это только duplicatable когда MaterialModule импортируется и необходимые HammerJS загружается. Есть ли способ заставить HammerJS не переопределять обработку событий через угловой 2? Я только включаю HammerJS для загрузки материала 2 без ошибок.

источник

2016-10-17 William Lohan

Вопросы должны содержать соответствующие части непосредственно вместо ссылки на внешние ресурсы. –

Я не могу воспроизвести вашу проблему https://plnkr.co/edit/mYRUDHfkTmYYD4vRhcUo?p=preview –

Спасибо @ Günter Zöchbauer, это позволяет мне знать, что мне нужно выяснить, почему мой проект имеет другое поведение на одном и том же компоненте, тогда на плункер. –

Чтобы получить нормальное поведение событий после включения материала 2 и hammerjs, вы предоставляете базовый HammerGestureConfig текущему модулю.

@Injectable() 
export class AppGestureConfig extends HammerGestureConfig { } 

@NgModule({ 
    imports: [ BrowserModule, MaterialModule.forRoot() ], 
    providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: AppGestureConfig }], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

https://plnkr.co/edit/Qeip4T?p=preview

Edit: Вот вопрос на GitHub
https://github.com/angular/material2/issues/1457

источник

2016-10-17 19:56:51

Требуется ли ElementRef, чтобы получить dragstart DragEvent в Angular 2?

ответ

Смежные вопросы