Angular 2 nicht erkennt Änderungen für @HostBinding

Question

I @HostBinding verwenden, um eine Klasse zusammen mit Chrome Drag zu setzen und API wie diese Tropfen:

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

Was passiert, dass mehr Zeit ist dann nicht, die isDraggedArticle Klasse nicht werde aus dem Element entfernt und ich weiß nicht warum. Ich habe versucht,

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

zum onDrop Verfahren Zugabe (wo ref ist ein ChangeDetectorRef und appRef ist ein ApplicationRef), aber es hilft nicht.

Answer 1

Ich denke, ich habe die Lösung für das Problem gefunden: Das Ereignis drop wird nicht auf das Element ausgelöst, das gezogen wurde, aber auf das Element ausgelöst wird, auf das abgelegt wird. Das bedeutet, statt this.isDraggedArticle = false in dem Drop Rückruf Einstellung, ich brauche es in dem dragend Rückruf zu tun:

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