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

【问题标题】：SVG.js 3 with Angular 7 "has no compatible call signatures" error带有 Angular 7 的 SVG.js 3“没有兼容的调用签名”错误
【发布时间】：2019-09-23 14:47:01
【问题描述】：

我正在使用 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”时的失败

【问题讨论】：

标签： angular svg svg.js

【解决方案1】：

svg.js v3 移至 esm。因此，您导入的是 esm 导出。
它不是你在 v2 中的这个函数/对象混合。

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

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

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

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

【讨论】：

【解决方案2】：

我这样做是为了在我的项目中使用 svg.js 3.x：

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

this.svgContainer = SvgJs.SVG(this.svgElement.nativeElement);

在您选择导入类/方法的方式之后，我的解决方案（您基本上拥有的解决方案）要求您使用命名空间来访问它们。 @Fuzzyma 的那个要求你一一导入你想使用的所有东西。

【讨论】：