angular对组件触摸事件处理问题

来源：5-3 Dom属性绑定

Meepo校园联盟

2017-04-02

场景地图组件:

option: MapOptions = {
  draggable: true,
  scrollwheel: true,
  disableDoubleClickZoom: false,
  panControl: true
};

constructor(
  public ele: ElementRef
) {
  console.log(this.option);
  this.map = new qq.maps.Map(this.ele.nativeElement,this.option);
}

地图无法滑动,报错

Ignored attempt to cancel a touchstart event with cancelable=false, 
for example because scrolling is in progress and cannot be interrupted.

是不是 angular对组件标签的事件做了特殊处理,提示这个

@HostListener('touchstart', ['$event'])
touchStart(e){
  console.log(e.cancelable);
}

打印结果为false

写回答

1回答

Meepo校园联盟

提问者

2017-04-02

// 不知道规范不 , 反正是问题解决了
@HostListener('touchend', ['$event'])
touchend(e){
  //console.log('end',e);
  this.timeStamp = e.timeStamp;
  this.start = {x: e.changedTouches[0].clientX,y: e.changedTouches[0].clientY,time: e.timeStamp}

  console.log(this.start);
  console.log(this.end);
  if(this.end.time - this.start.time > 100){
    let x: number = this.end.x - this.start.x;
    let y: number = this.end.y - this.end.y;
    this.map.panBy(x,y)
  }
}
//
@HostListener('touchstart', ['$event'])
touchstart(e){
  //console.log(e);
  this.timeStamp= e.timestamp;
  this.end = {x: e.changedTouches[0].clientX,y: e.changedTouches[0].clientY,time: e.timeStamp}
}

实在没办法,自己实现了

Angular4.0从入门到实战打造股票管理网站

Angular新特性，教你熟练使用 Angular 和 Typescript 开发组件式单页应用

2683 学习 · 1361 问题

查看课程

相似问题

可重用组件

回答 2

父组件异步获取数组通过@Input传入到子组件，在子组件中无法使用

回答 1

未来元素的事件和js引用

回答 1

组件之间的路由会对自定义的script产生影响么？

回答 2

正在使用 Angular 开发移动 web app ，怎么做到下拉加载数据

回答 1

打开慕课网App查看更多内容