将 hammer.js 动作添加到组件 Angular2 中的 svg 矩形

Question

我正在开发 Angular 2 应用程序，我有一个包含简单 SVG 矩形的组件，我正在尝试使用 Hammer.js 库来取代和改造它我的组件视图内的 SVG 矩形，因此我完成了这些步骤：

我已经下载并复制了 3 个文件到我的项目存储库

hammer.js 
hammer.min.js 
hammer.min.map

我已将此脚本标记添加到我的索引头中：

<script src="dev/jqueryLibs/hammer/hammer.js" type="text/javascript"></script>

我在控制台中收到此错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

我尝试将它导入我的组件并在方法和 svg 元素之间添加引用，如下所示：

TS.File内容：

import {Component, ElementRef, AfterViewInit } from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from "angular2/common";

@Component({
    selector: 'content',
    templateUrl: 'content.component.html',
    styleUrls: ['content.component.css'],
    directives: [FORM_DIRECTIVES],
})

export class ContentComponent implements AfterViewInit{

static hammerInitialized = false;
constructor(private el:ElementRef)
    {}
ngAfterViewInit() {
        console.log('in ngAfterViewInit');
        if (!ContentComponent.hammerInitialized) {
            console.log('hammer not initialised');

            var myElement = document.getElementById('test1');
            var hammertime = new Hammer(myElement);
            hammertime.on('swiperight', function(ev) {
                console.log('caught swipe right');
                console.log(ev);
            });

            ContentComponent.hammerInitialized = true;
        } else {
            console.log('hammer already initialised');
        }
    }

查看文件内容：

<svg class="simulation">
  <rect id="test1" x="20" y="500" height="150" width="200" style="stroke:#EC9A20;stroke-width: 15; fill: none"/>
</svg>

因此，我仍然无法移动我的 SVG 矩形，并且根据此控制台消息，Hammer.js 似乎甚至运行都不是：

hammer not initialised

谁能告诉我哪里出错了或者我该怎么办？

Answer 1

已解决：锤子声明的脚本标签 HTML 文件中的 jquery-ui 库声明必须放在之后。

<script src="./dev/resources/js/jquery.js"></script>
<script src="./dev/resources/js/jquery-ui.js"></script>

<script src="./dev/jqueryLibs/jquery-1.12.1.min.js"></script>
<script src="./dev/jqueryLibs/jquery-migrate-1.2.1.min.js"></script>

<!--importer ici la js de bootstrap-->
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

<!--Importer ici hammer.js-->
<script src="dev/jqueryLibs/hammer/hammer.js" type="text/javascript"></script>

将 hammer.js 动作添加到组件 Angular2 中的 svg 矩形

Adding hammer.js actions to a svg rectangle in a component Angular2

svg

hammer.js

typescript

angular2-directives

angular