我想知道我是否可以获得有关移动设备事件的帮助.我正在寻找一种方法将函数绑定到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)
任何有关此问题的帮助将不胜感激!
所以我想知道是否有办法将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然后串联只有 …