Question

我正在尝试将vexflow添加到我的angular 6应用中...

我试图将这一行添加到我的Types.d.ts文件中

declare var Vex: any;

和我的angular.json中的vexflow-min.js

  "scripts": [
             ...
             "./node_modules/vexflow/releases/vexflow-min.js",
             ...
            ],

我正在尝试在我的app.component.ts中渲染元素

  ngOnInit(){
      var div = document.getElementById("vexflow-test")
      var VF = Vex.Flow;
      renderer = new VF.Renderer(div,VF.Renderer.Backends.SVG);
  }

我可以看到已正确加载Vex（console.log（Vex））但是我收到一个错误消息，告诉我渲染器未定义

AppComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: renderer is not defined

Answer 1

好的，现在可以使用

   public VF;
   onNgInit(){
        var div = document.getElementById("vexflow-player")
        this.VF = Vex.Flow;
        var renderer = new this.VF.Renderer(div,this.VF.Renderer.Backends.SVG);
        renderer.resize(500, 500);
        var context = renderer.getContext();
        context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
        var stave = new this.VF.Stave(10, 40, 400);
        stave.addClef("treble").addTimeSignature("4/4");
        stave.setContext(context).draw();
     }

在角度6中添加Vexflow

1 个答案: