javascript - Angular 2 不检测@HostBinding 的变化

Question

我使用 @HostBinding 与 Chrome 的拖放 API 一起设置一个类，如下所示:

@Directive({ selector: '[sortable-article]' })
export class SortableArticleComponent {

    @HostBinding('class.dragged-element')
    isDraggedArticle: boolean = false;

    constructor(elRef: ElementRef, private ref: ChangeDetectorRef, private appRef: ApplicationRef, private dndService: ArticleDndService) {
        this.el = elRef.nativeElement;
        Observable.fromEvent(this.el, 'dragstart').subscribe(e => this.onDragStart(<DragEvent> e));
        Observable.fromEvent(this.el, 'drop').subscribe(e => this.onDrop(<DragEvent> e));
    }

    onDragStart(event: DragEvent) {
        this.isDraggedArticle = true;
    }

    onDrop(event: DragEvent) {
        event.preventDefault();
        this.isDraggedArticle = false;
    }
}

发生的情况是，isDraggedArticle 类没有从元素中删除，但我不知道为什么。我尝试添加

this.ref.detectChanges();
this.appRef.tick();

onDrop 方法(其中 ref 是一个 ChangeDetectorRef 而 appRef 是一个 ApplicationRef)，但是它没有帮助。

Answer 1

我想我找到了问题的解决方案: drop 事件不会在已拖动的项目上触发，但会在拖放到其上的项目上触发。这意味着我需要在 dragend 回调中设置 this.isDraggedArticle = false 而不是设置:

@Directive({ selector: '[sortable-article]' })
export class SortableArticleComponent {

    @HostBinding('class.dragged-element')
    isDraggedArticle: boolean = false;

    constructor(elRef: ElementRef, private ref: ChangeDetectorRef, private appRef: ApplicationRef, private dndService: ArticleDndService) {
        this.el = elRef.nativeElement;
        Observable.fromEvent(this.el, 'dragstart').subscribe(e => this.onDragStart(<DragEvent> e));
        Observable.fromEvent(this.el, 'dragend').subscribe(e => this.onDragEnd(<DragEvent> e));
    }

    onDragStart(event: DragEvent) {
        this.isDraggedArticle = true;
    }

    onDragEnd(event: DragEvent) {
        this.isDraggedArticle = false;
    }
}