Dart Cordova+Polymer+Angular2+FastClick答案

【问题标题】：Dart Cordova+Polymer+Angular2+FastClickDart Cordova+Polymer+Angular2+FastClick
【发布时间】：2015-10-28 15:03:33
【问题描述】：

在将 Dart Polymer 的纸元素与 Angular 2 一起使用时，如何消除 iOS 设备上约 300 毫秒的点击延迟？

例如在 Angular 2 组件中，如果我有一个包含 paper-button 和 (click)="myFunc()" 的 HTML 模板，在 iOS 设备中，myFunc 在这个可怕的臭名昭著的延迟之后被调用。

我尝试过使用 FastClick.js，但是在我将其附加（到正文或特定的纸质按钮）后，该元素不再可点击，当我点击它时我仍然可以看到涟漪效果，但是该方法没有被调用（在移动设备上，但在桌面浏览器中它照常工作），它对paper-input(s) 也有相同的效果，它没有得到关注。

可以做些什么吗？也许可以制作一个与 FastClick.js 等效的 Dart/Angular2？

更新 1

值得一提的是，在一个 UIWebView (cordova) 下，我无法让 Angular2.dart 和 Polymer.dart 同时工作，看起来他们一起玩得不好，这也是一个障碍，可以也可以使用一些帮助。

更新 2

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

更新 3

白屏问题： Cordova下首次运行出现白屏问题似乎与Polymer有关；它与 Angular2 无关。
点击延迟：使用 Polymer 的 on-tap 事件可以防止点击延迟，但是，这意味着您不能使用 Angular2 的（点击）事件，它不能像 Polymer 那样很好地处理点击。

【问题讨论】：

你是否为 Polymer + Dart2js 启用了 CSP
我已启用全局 CSP：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">。在 Cordova 的 config.xml 中：<plugin name="cordova-plugin-whitelist" version="1" /> <allow-navigation href="*" />。有趣的是，它可以在 Safari 中运行，而不是在 Cordova 下，这只是问题的一部分，还有点击延迟的问题。
我认为您需要在 pubspec.yaml 中启用它两次。我不知道点击延迟。
@GünterZöchbauer 谢谢，它部分解决了白色 Cordova UIWebView 问题，部分我的意思是在第一次开始编译时，即使在完成编译后 UIWebView 仍然是空白的，但是如果我重新启动 Cordova应用它显示元素（因为它已经编译），所以它还没有完全解决。
$dart2js alsi 允许启用 CSP。关于这个有一些相关的问题。我只在手机上，因此留给您查找；-)

标签： cordova dart dart-polymer angular fastclick.js

【解决方案1】：

我无法让 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

然后在 app.module.ts 中

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

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

然后在你的模板中：

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

【讨论】：

它可以工作，但它似乎会导致事件冒泡。在 Android 中，点击会触发两次。有没有办法阻止它？
@francojay 我已经有一段时间没有使用它了。但我认为您可以传递事件对象，如<button (down)="touchAction($event)">Try this on mobile device</button>，然后在您的touchAction() 函数中接收事件并调用 event.stopPropagation()，如：public touchAction(event: any): void { event.stopPropagation(); }。抱歉，我没有更多信息。祝你好运！