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

我很难在Angular 5项目中使用typescript导入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 with typescript中,这是完全不同的,因为我需要在ticket.component.ts文件中导入,而不是在html中.

那么如何从node_modules中将多个插件作为Svg类型导入svg.js?

更新1:

我读了一个建议来导入这些第三方js库的输入,所以我安装了:

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

更新2:

试图将两个js文件合并到一个文件并导入合并版本,但由于某种原因,这种hacky方式不起作用…

提前致谢!

解决方法:

不幸的是,svgjs.draggable.js没有定义类型文件,所以你不能像svg.js那样用ES6导入/导出导入它.定义类型文件是扩展名为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"
     ...
],

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

我们将通过使用以下语法声明const来执行此操作,声明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();

      }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐