简体   繁体   中英

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?

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.

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.

Can something be done about it? Maybe a Dart/Angular2 equivalent of FastClick.js could be made?

Update 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.

Update 2

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

Update 3

  • White screen issue: It appears that the white screen problem on first run under Cordova is related to Polymer; it has nothing to do with 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.

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 .

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

Then in 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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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