角2沒有偵測到@HostBinding

Question

我用@HostBinding與Chrome的拖放在一起設置一個類的變化和Drop 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，我需要做的是在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; 
    } 
}