简体   繁体   English

Dart Cordova + Polymer + Angular2 + FastClick

[英]Dart Cordova+Polymer+Angular2+FastClick

How can I eliminate the ~300ms tap delay on iOS devices when using Dart Polymer's paper-elements together with Angular 2? 当将Dart Polymer的纸张元素与Angular 2一起使用时,如何消除iOS设备上〜300ms的点击延迟?

eg In an Angular 2 component, if I have an HTML template that includes paper-button with (click)="myFunc()" , in iOS devices, myFunc is called after this dreaded infamous delay. 例如,在Angular 2组件中,如果我的HTML模板包含带有(click)="myFunc()" paper-button ,则在iOS设备中,myFunc会在这个可怕的臭名昭着的延迟之后被调用。

I've tried using FastClick.js, but after I attach it (to the body, or a specific paper-button), the element is no longer clickable, I can still see the ripple effect when I tap it, but the method is not getting called (on mobile, however in desktop browsers it works as usual), it also has the same effect on paper-input (s), it's not getting focused. 我尝试过使用FastClick.js,但是在我将它(连接到正文或特定的纸张按钮)后,该元素不再可点击,当我点击它时我仍然可以看到涟漪效果,但方法是没有被调用(在移动设备上,但是在桌面浏览器中它像往常一样工作),它对paper-input也有相同的效果,它没有得到集中。

Can something be done about it? 可以做点什么吗? Maybe a Dart/Angular2 equivalent of FastClick.js could be made? 也许可以制作相当于FastClick.js的Dart / Angular2?

Update 1 更新1

It's worth mentioning that under a UIWebView (cordova), I couldn't get Angular2.dart and Polymer.dart to work at the same time, it seems they don't play well together, which is also a blocker, could use some help on that as well. 值得一提的是,在UIWebView(cordova)下,我无法让Angular2.dart和Polymer.dart同时工作,看起来它们不能很好地协同工作,这也是一个拦截器,可以使用一些帮助在那上面。

Update 2 更新2

Sources: https://github.com/aabluedragon/dart_issue_polymer_angular2_cordova 来源: https//github.com/aabluedragon/dart_issue_polymer_angular2_cordova

Update 3 更新3

  • White screen issue: It appears that the white screen problem on first run under Cordova is related to Polymer; 白屏问题: Cordova首次出现的白屏问题似乎与Polymer有关; it has nothing to do with Angular2. 它与Angular2无关。
  • Tap delay: Using Polymer's on-tap event prevents the tap delay, however, that means you cannot use Angular2's (click) events, which don't handle taps nicely as Polymer. 点按延迟:使用Polymer的on-tap事件可以防止点按延迟,这意味着您无法使用Angular2的(点击)事件,这些事件不能很好地处理Tap作为Polymer。

I couldn't get FastClick to work with Angular 2+ (Angular 4 in my case), but I found a different solution called ng2-events which has multiple features, one of them being support for touch events in angular 4 . 我无法使用FastClick来处理Angular 2+(在我的情况下是Angular 4),但是我发现了一个名为ng2-events的不同解决方案,它具有多个功能,其中一个支持角4中的触摸事件

# for angular 5
npm install --save ng2-events
# for angular 4
npm install --save ng2-events@3.1.0

Then in app.module.ts 然后在app.module.ts中

import {NgModule} from "@angular/core";
import {TouchEventModule} from "ng2-events/lib/touch";

@NgModule({
    imports: [TouchEventModule],
    exports: [TouchEventModule]
})
export class AppModule {}

Then in your template: 然后在你的模板中:

<button (down)="touchAction()">Try this on mobile device</button>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM