Question

在这个要点https://gist.github.com/gatimus/5abe1fb2ef45f26657ed6843902b872b中，我正在听2个元素的dragstart事件。一个使用angular 2语法，另一个使用native元素引用。只添加具有本机元素引用的事件侦听器是我能够获得具有dataTransfer属性的DragEvent。 ElementRef被视为安全风险，并且您似乎应该能够使用Angular 2事件绑定语法完成相同的操作。是ElementRef需要在Angular 2中使用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
    }

}

编辑：事实证明，只有在导入MaterialModule并加载所需的HammerJS时，这才是可复制的。有没有办法让HammerJS不通过角度2覆盖事件处理？我只包括HammerJS来装载材料2而没有错误。

Answer 1

要在包含材料2和锤子之后获得正常事件行为，您需要为当前模块提供基本的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

编辑：这是github上的问题 https://github.com/angular/material2/issues/1457

是否需要ElementRef才能在Angular 2中获得dragstart DragEvent？

1 个答案: