Question

我刚开始尝试在Angular4中构建音乐应用程序，我想使用Js库vexflow。我刚刚开始学习如何使用这个东西，当我在我的组件中得到奇怪的赋值错误时。我真的按照vexflow教程（转换为导出的类语法）并获得错误。我想知道我是否正确导入了库。这是我采取的步骤：

npm install vexflow --save
npm install @types/vexflow --save-dev

我在tsconfig.app.json文件中添加了vexflow到我的类型：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [
      "vexflow"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

这是我的组件内容：

import { Component } from '@angular/core';
import * as vexflow from 'vexflow';

@Component({
  selector: 'p-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  VF = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
  div = document.getElementById("ogStaff")
  renderer = new this.VF.Renderer(this.div, this.VF.Renderer.Backends.SVG);

  // Configure the rendering context.
  this.renderer.resize(500, 500);
  var context = this.renderer.getContext();
  context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

  // Create a stave of width 400 at position 10, 40 on the canvas.
  var stave = new this.VF.Stave(10, 40, 400);

  // Add a clef and time signature.
  stave.addClef("treble").addTimeSignature("4/4");

  // Connect it to the rendering context and draw!
  stave.setContext(context).draw();
}

你在这里看到的是，在第十六行的this.renderer下，在这下面有一个错误。它说：

[ts]意外的令牌。期望构造函数，方法，访问器或属性。

我想知道我是否正确导入了这个库，以及在我分配实例变量时它为什么不理解。

在这个例子中，如果我指定＆＃34;渲染器＆＃34; （在第13行）作为＆＃34; var renderer＆＃34;，程序给出了与上面相同的错误，但在下面，对于＆＃34; context＆＃34; （第17行），如果我不添加var，则会抛出错误。如果这是我的IDE或者我已经包含这个库的方式，我有点困惑。

在Angular4组件中使用第三方库，特别是vexflow

0 个答案: