在Angular中使用插件导入svg.js

Question

我在Angular 5项目中使用Typescript导入svg.js及其插件遇到困难。

使用npm我安装了：

• svg.js

• svg.draggable.js

在ticket.component.ts中：将svg.js导入为Svg类型，这样我就可以绘制矩形，此代码有效：

import * as Svg from 'svg.js'
...
export class TicketComponent implements OnInit {

  ngOnInit() {
    let draw = Svg('ticket-svg').size(1000, 500);
    let rect = draw.rect(800, 300).attr({fill: '#fff', stroke: '#000', 'stroke-width': 1});
  }
...
}

但是我不能使用svg.draggable插件中的函数，因为它没有被导入：

rect.draggable()
// TS2339: Property 'draggable' does not exist on type 'Rect'.

我想要这样的东西：

import * as Svg from {'svg.js', 'svg.draggable.js', 'svg.whatever.js'}

在svg.draggable.js的GitHub示例代码中，他们只是在html中添加了这两行，仅此而已：

<script src="svg.js"></script>
<script src="svg.draggable.js"></script>

在与打字稿成角度的字体中，这是完全不同的，因为我需要在ticket.component.ts文件而不是html中导入。

那么，如何从node_modules导入具有多个插件的svg.js作为Svg类型呢？

更新1：

我阅读了有关导入这些第三方js库类型的建议，因此我安装了：

"@types/svg.js": "^2.3.1",
"@types/svgjs.draggable": "0.0.30"

更新2：

试图将两个js文件合并为一个文件并导入合并的版本，但是由于某种原因，这种骇人听闻的方法也不起作用...

提前致谢！

Answer 1

不幸的是，svgjs.draggable.js由于没有定义类型文件，因此您无法通过svg.js之类的ES6导入/导出来导入它。定义类型文件是具有扩展名的文件，d.ts您可以在库的根目录中找到该扩展名。

同样在我们的情况下svgjs.draggable扩展了svg.js。因此，我们需要在svgjs.draggable之后导入svg.js。那么该怎么做呢？解决方案是从index.html或使用导入它们angular-cli.json。我选择后一种。

首先安装两个库：

$ npm i svg.js -s
$ npm i svg.draggable.js -s

添加到angular-cli.json

  "scripts": [
     ...
    "../node_modules/svg.js/dist/svg.min.js",
    "../node_modules/svg.draggable.js/dist/svg.draggable.min.js"
     ...
],

接下来告诉打字稿停止抱怨

我们将使用以下语法declare const来完成此操作，该语法告诉typescript您导入确实确实存在，但由于找不到定义类型文件而使您不知道。因此，在一个组件中，我做了一个小演示。

import { Component, OnInit } from '@angular/core';
declare const SVG:any;

    @Component({
      selector: 'app-root',
      template: `<div id="canvas"></div>`,
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      title = 'app';

      ngOnInit() {
        const draw = SVG('canvas').size(400, 400);
        const rect = draw.rect(100, 100);
        rect.draggable();

      }