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

Ich認為我找到了解決問題的方法： drop事件不是在已拖動的項目上觸發的，而是在放置到其上的項目上觸發的。 這意味着this.isDraggedArticle = false在drop回調中設置this.isDraggedArticle = false ，我需要在dragend回調中進行設置：

@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;
    }
}