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

Question

我在 Angular 5 项目中使用打字稿导入 svg.js 时遇到困难plugins。

我安装了 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>

在 angular 中使用打字稿，这是完全不同的，因为我需要在 ticket.component.ts 文件中导入，而不是在 html.

中

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

更新 1：

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

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

更新二：

试图将两个 js 文件合并为一个文件并导入合并后的版本，但由于某种原因，这种 hacky 方式也不起作用...

提前致谢！

Answer 1

不幸的是 svgjs.draggable.js 没有定义类型文件，所以你不能像 svg.js 那样用 ES6 import/export 导入它.定义类型文件是扩展名为 d.ts 的文件，您可以在库的根目录中找到它。

同样在我们的例子中 svgjs.draggable 扩展了 svg.js。所以我们需要在svg.js之后导入svgjs.draggable。那么该怎么做呢？解决方案是从 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 导入确实存在，但您只是不知道它，因为您没有找到定义类型文件。所以在一个组件中我做了一个小demo。

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();

      }

Answer 2

更新： 哎呀...意识到你的问题是 svg.draggable.js 而不仅仅是 svg.js。如果其他人需要此指导，我将把它留在这里。抱歉造成任何混淆。

以下适用于我的设置（Angular 9，Typescript，SVG.js v3.0）。

安装SVG.js

npm install --save @svgdotjs/svg.js

导入组件

根据 SVG.js Getting Started guide，将 SVG 导入您的组件。

import { SVG } from '@svgdotjs/svg.js'

根据需要使用 SVG

export class MyComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {

    // don't forget to add "#" CSS selector to the name of the DOM element.
    const draw = SVG().addTo('#canvas').size(400, 400);
    const rect = draw.rect(100, 100, );
  }

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

Import svg.js with plugins in Angular

javascript

svg

typescript

svg.js

angular