时间戳

首页 > 解决方案 > 带有 Angular 7 的 SVG.js 3“没有兼容的调用签名”错误

angular - 带有 Angular 7 的 SVG.js 3“没有兼容的调用签名”错误

问题描述

我正在使用 Angular 7 并且已经能够使用 SVG.js v2.* 但我无法让 SVG.js v3.* 工作。我做了两个 github 项目，第一个显示 SVG.js v2 工作angular7-svgjs2，第二个显示 SVG.js v3 不工作，唯一改变的是导入的库angular7-svgjs3

使用 SVG.js 2.7*（可行）

import { Component, AfterContentInit } from '@angular/core';

import * as SVGjs from 'svg.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  title = 'angular7-svgjs2';

  ngAfterContentInit () {
    let draw = SVGjs('drawing');
    let rect = draw.rect(100, 100);
  }
}

使用 SVG.js 3.0.*（失败）

import { Component, AfterContentInit } from '@angular/core';

import * as SVGjs from '@svgdotjs/svg.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  title = 'angular7-svgjs3';

  ngAfterContentInit () {
    let draw = SVGjs('drawing');
    let rect = draw.rect(100, 100);
  }
}

这是第二个示例中运行“ng serve”时的失败svgjs v3 失败

标签： angularsvgsvg.js

解决方案

svg.js v3 移至 esm。因此，您导入的是 esm 导出。
它不是您在 v2 中拥有的这种功能/对象混合。

所以，只导入你真正需要的：

import {SVG, find, Rect, whateveryouneed} from '@svgdotjs/svg.js'

var canvas = SVG().addTo('#drawing')

如您所见，新文档的初始化也发生了变化。

推荐阅读