有什么方法可以防止角2 RC5中DOM的去除吗？
我有角2和触摸设备的问题。特别是，当组件通过NgFor呈现并(触摸)拖动到屏幕上时。如果NgFor的重呈现发生在触摸拖动过程中(由于外部事件更新绑定到NgFor的数据，这在我的应用程序中很常见)，就会出现这个问题。touchmove events停止触发，并要求您举起手指再次将其放回原处，这是一种糟糕的移动体验。如果使用鼠标，则不会发生此问题。
本质上，在我的应用程序中，我监听组件上的touchstart事件，通过一个条件*ngIf="isDragging" (它不在NgFor内)显示另一个'DragComponent‘，它是根据touchmove事件位置数据在屏幕上移动的。
我知道为什么会这样。这要归功于Touch Spec的浏览器实现。我通常使用vanilla编写这个问题的代码，方法是将DOM元素保存在内存中，直到touchend或touchcancel事件触发。然而，角现在控制DOM！他们正在删除元素时，它仍然在使用！
看看这个柱塞http://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=preview，更多地了解我想要描述的东西。(注意触摸屏需要，或者使用Chrome DevTools中的触摸仿真)
我还在“角度回购”中创建了一个问题#9864，但没有得到任何响应。我知道他们正忙着为决赛做准备，但在我看来，这应该在决赛之前解决，因为很多用户会在触摸设备上使用角度。
我希望有任何建议/解决办法/黑客。请随时使用解决方案更新柱塞。
回答 1
Stack Overflow用户
发布于 2016-08-15 01:41:04
找到了一个解决办法：
实际上，TouchEvents在DOM删除之后确实会继续触发，但是它们只针对原始touchstart发生的节点/元素，并且不冒泡(不像MouseEvents，这让人困惑！)
因此，我们不能执行一个简单的@HostListener('touchmove', ['$event'])，并期望它与DOM删除一起工作(因为事件侦听器附加到外部组件元素)。我们必须动态，将事件侦听器添加到touchstart事件的目标元素中。然后在touchend或touchcancel (或ngOnDestroy())上执行清理。
索伦：
@HostListener('touchstart', ['$event'])
@HostListener('mousedown', ['$event'])
dragStart(event) {
if (event.touches) { // avoid touch event loss issue
this.removePreviousTouchListeners(); // avoid mem leaks
this.touchmoveListenFunc = this.renderer.listen(event.target, 'touchmove', (e) => { this.onDragMove(e); });
this.touchendListenFunc = this.renderer.listen(event.target, 'touchend', (e) => { this.removePreviousTouchListeners(); this.onDragEnd(e); });
this.touchcancelListenFunc = this.renderer.listen(event.target, 'touchcancel', (e) => { this.removePreviousTouchListeners(); this.onDragEnd(e); });
}
...
}
removePreviousTouchListeners() {
if (this.touchmoveListenFunc !== null)
this.touchmoveListenFunc(); // remove previous listener
if (this.touchendListenFunc !== null)
this.touchendListenFunc(); // remove previous listener
if (this.touchcancelListenFunc !== null)
this.touchcancelListenFunc(); // remove previous listener
this.touchmoveListenFunc = null;
this.touchendListenFunc = null;
this.touchcancelListenFunc = null;
}
@HostListener('mousemove', ['$event'])
// @HostListener('touchmove', ['$event']) // don't declare this, as it is added dynamically
onDragMove(event) {
... // do stuff with event
}
@HostListener('mouseup', ['$event'])
// @HostListener('touchend', ['$event']) // don't use these as they are added dynamically
// @HostListener('touchcancel', ['$event']) // don't use these as they are added dynamically
onDragEnd(event) {
... // do stuff
}
ngOnDestroy() {
this.removePreviousTouchListeners();不要忘记在构造函数中注入Renderer (从@angular/core导入
https://stackoverflow.com/questions/38779609
复制相似问题
腾讯云开发者
