在angular 6中添加Vexflow

Question

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

我尝试在我的typings.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();
     }