在Angular 8中导入interactjs 1.7.2不起作用答案

【问题标题】：Importing interactjs 1.7.2 in Angular 8 not working在Angular 8中导入interactjs 1.7.2不起作用
【发布时间】：2019-12-15 16:13:29
【问题描述】：

我正在尝试在 Angular 8 中导入 interactive.js 1.7.2。我安装如下：

npm install interactjs@next

然后以不同的方式导入，但没有一个起作用：

import * as interact from 'interactjs';

import interact from 'interactjs'

import from 'interactjs';

import * as interact from '@interactjs/interactjs';

declare var interact:any; (with no imports)

here 的解决方案似乎对其他人有效，但对我无效。

我在启动 Angular 时遇到很多错误，所以它必须是导入的问题，例如我得到：

src/app/web/visuals/svg.rectangle.ts(65,25)：错误 TS2349：不能调用其类型缺少调用签名的表达式。键入'类型导入（“C：/projects/myproject/node_modules/@interactjs/interactjs/index”）' 没有兼容的调用签名。

../../node_modules/@interactjs/core/Interactable.d.ts(7,19)：错误 TS1086：无法在环境上下文中声明访问器。

../../node_modules/@interactjs/core/Interaction.d.ts(74,45)：错误 TS2304：找不到名称“省略”。

如何解决这个问题？

更新

这个问题记录在here，但没有解决方案。

【问题讨论】：

你使用的是什么版本的 TypeScript？您能否提供有关您的设置的更多详细信息？
@Roy TypeScript 3.7.3，我正在使用 VS 代码，并且在编辑 Angular 文件时也会出错，例如 This expression is not callable. 上的 interact('.item').draggable({。

标签： javascript node.js angular typescript single-page-application

【解决方案1】：

你可以使用 es5 语法来做这样的事情

const interact = require('interactjs')

【讨论】：

【解决方案2】：


import interact from 'interactjs'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})

https://interactjs.io/

如官网所示

【讨论】：

【解决方案3】：

下面的 Angular 8 代码对我有用。

import * as InteractJS from 'interactjs/dist/interact.js';

  ngOnInit() {
    InteractJS('.item').draggable({
      onmove(event) {
        console.log(event.pageX, event.pageY);
      }
    });
  }

.item {
  touch-action: none;
  user-select: none;
  height: 80px;
  width: 80px;
  background-color: red;
}

【讨论】：