Angular 2 未检测到 @HostBinding 的更改答案

【问题标题】：Angular 2 does not detect changes for @HostBindingAngular 2 未检测到 @HostBinding 的更改
【发布时间】：2017-09-18 16:56:32
【问题描述】：

我使用@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），但它没有帮助。

【问题讨论】：

所以你的 onDrop 方法在正确的时间被调用并且 isDraggedArticle 没有改变？
是的，好点，但我可以确认，因为实际上更多的事情发生在 onDrop 实际执行。
对我来说，您的代码是正确的。如果在构造函数中初始化 isDraggedArticle 没有变化？ @HostBinding('class.dragged-element') isDraggedArticle: boolean;构造函数（）{this.isDraggedArticle = false}
不，也不起作用:(
好的，我对这个话题很感兴趣。我不在家，但我稍后会多尝试一下，看看我们是否可以得出一些结论。现在，我已经阅读了一些关于和我看到的与您的场景类似的示例，它们在分配后执行 event.preventDefault() 。我的意思是 this.isDraggedArticle = false; event.preventDefault();一开始对我来说没有任何意义，但是看着你的错误，我认为如果“执行”是 onDragStart，它可以将默认状态应用为 true，然后将值设置为 true，而不考虑您的 preventDefault() 在分配之前。我不知道

标签： javascript angularjs events drag-and-drop

【解决方案1】：

我想我找到了问题的解决方案：drop 事件不会在已拖动的项目上触发，但会在拖放到的项目上触发。这意味着我不需要在 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;
    }
}

【讨论】：