小编Eri*_*alo的帖子

在Angular2中使用移动事件

我想知道我是否可以获得有关移动设备事件的帮助.我正在寻找一种方法将函数绑定到Angular 2中的滑动事件.我在Github上看到这个问题,提到Angular 2使用Hammer.js进行移动事件处理.

我在使事件工作时遇到一些麻烦,因为我收到以下错误:

EXCEPTION:Hammer.js未加载,无法绑定swipeleft事件

我的代码片段如下:

import {Component, View, AfterContentInit} from 'angular2/core';
import {HelperService} from "./helper-service";
import {HammerGesturesPluginCommon} from 'angular2/src/platform/dom/events/hammer_common'

@View({
  template: `<div [id]="middleCircle" (swipeleft)="doThis()"></div>`
})

export class ColumnDirective implements AfterContentInit {
  constructor(private helperService:HelperService) {}
  doThis(){
     console.log('This thing has been done.');
   }
 }
Run Code Online (Sandbox Code Playgroud)

如果我将Hammer Gestures添加到我的构造函数中,我会收到此错误:

constructor(private helperService:HelperService, private hammerGesturesPluginCommon: HammerGesturesPluginCommon) {}
Run Code Online (Sandbox Code Playgroud)

例外:没有提供者!(ColumnDirective - > t)

任何有关此问题的帮助将不胜感激!

dom-events hammer.js typescript angular

11
推荐指数
2
解决办法
2万
查看次数

在Angular2和Webpack中使用CDN文件

所以我想知道是否有办法将CDN文件与webpack包一起包含在内.我一直在环顾四周,无法设置一个小的Angular2仓库,它不会使用Typescript转换器(使用CDN而不使用Systemjs)抛出错误.在index.html的底部,我有来自cdn.js的Angular2的各种依赖项,如下所示:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/http.min.js"></script>
<script src="js/app.js"></script><!--bundle from webpack-->
Run Code Online (Sandbox Code Playgroud)

通常使用webpack,我知道它会调查我已安装的node_modules,然后将它们捆绑到app.js中,如下所示:

var webpack = require('webpack');

module.exports = {
  entry: "./src/typescript/app",
  devtool: 'source-map',
  output: {
    path: __dirname + "/app/js", publicPath: 'app/js', filename: "app.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};
Run Code Online (Sandbox Code Playgroud)

我的tsconfig.json也可供参考:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}
Run Code Online (Sandbox Code Playgroud)

然而,对于这个代码,我只想transpile然后串联只有 …

cdn node-modules typescript webpack angular

5
推荐指数
1
解决办法
4158
查看次数