[英]Import svg.js with plugins in Angular
我在 Angular 5 项目中使用打字稿导入 svg.js 及其插件时遇到困难。
使用 npm 我安装了:
SVG.js
在 ticket.component.ts: Imported svg.js as Svg type 中,这样我可以绘制一个矩形,此代码有效:
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:
我阅读了为这些 3rd 方 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。 所以我们需要在svgjs.draggable
之后导入svg.js
。 那么怎么做呢? 解决方案是从index.html
或使用angular-cli.json
导入它们。 我会选择后者。
$ npm i svg.js -s
$ npm i svg.draggable.js -s
"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();
}
更新: Opps...意识到你的问题出在 svg.draggable.js 而不仅仅是 svg.js。 如果其他人需要此指导,我将把它留在这里。 很抱歉有任何混淆。
以下内容适用于我的设置(Angular 9、Typescript、SVG.js v3.0)。
npm install --save @svgdotjs/svg.js
根据SVG.js 入门指南,将 SVG 导入到您的组件中。
import { SVG } from '@svgdotjs/svg.js'
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, );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.