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>

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

未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null

我尝试在我的组件中导入它并在methode和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>  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>  <script src="dev/jqueryLibs/hammer/hammer.js" type="text/javascript"></script>

将hammer.js动作添加到组件Angular2

1 个答案: