用转角插件导入svg.js

Question

我很难导入svg.js和它的插件在一个角形5项目中使用类型记录。

在国家预防机制I安装后：

• svg.js
• svg.draggable.js

在ticket.component.ts:导入Svg类型的svg.js中，这样我就可以绘制一个矩形，这段代码可以工作：

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'}

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

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

在与类型记录的角度，这是完全不同的，因为我需要导入在ticket.component.ts文件，而不是在html。

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

更新1:

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

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

更新2:

试图将两个js文件合并到一个文件中并导入合并版本，但由于某种原因，这种黑客方式也无法工作.

提前感谢！

Answer 1

不幸的是，svgjs.draggable.js没有定义类型文件，因此不能使用ES6导入/导出(如svg.js )导入它。定义类型文件是扩展名为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

添加到角-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();

      }

Answer 2

更新： Opps...realized您的问题在于svg.draggable.js而不仅仅是svg.js。如果其他人需要这个指导的话，我就把这个留在这里。抱歉弄乱了。

下面的工作为我的设置(角9，类型记录，SVG.js v3.0)。

安装SVG.js

npm install --save @svgdotjs/svg.js

导入组件

根据SVG.js入门指南，将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, );
  }