时间戳

首页 > 解决方案 > 如何在 Angular 应用程序中显示一个简单的 abcjs 工作表？

angular - 如何在 Angular 应用程序中显示一个简单的 abcjs 工作表？

问题描述

在应用程序中使用abcjs库Angular 7，我有以下模板：

<div id="{{device.name}}"></div>

与控制器：

@Component({
  selector: 'midi-sheet',
  templateUrl: './sheet.component.html',
  styleUrls: ['./sheet.component.css']
})
export class SheetComponent implements AfterViewInit, OnDestroy  {

  // devices$: Observable<Array<Device>>;
  @Input() device: Device;

  constructor(
    // private storeService: StoreService,
    private sheetService: SheetService
  ) { }

  ngAfterViewInit() {
    this.createSheet();
  }

  ngOnDestroy() {
  }

  private createSheet() {
    const sheet = this.sheetService.createSheet(this.device.name);
  }

}

及其服务：

export class SheetService {

  public createSheet(name: string) {
    const elementName: string = '#' + name;
    // tslint:disable-next-line: max-line-length
    const tune = 'X:1\nT: Cooley\'s\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\nD2|:"Em"EB{c}BA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|\n"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|1"Em"DEFD E2 D2:|2"Em"DEFD E2 gf||\n|:"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|\n"Em"eB B2 eBgB|eB B2 defg|"D"afe^c dBAF|1"Em"DEFD E2 gf:|2"Em"DEFD E4|]\n';
    const sheet = abcjs.renderAbc(elementName, tune, {});
    console.log('Created a sheet for ' + name);
    return sheet;
  }

}

控制台日志显示正在创建工作表：

Created a sheet for VMPKOutput

Chrome 浏览器控制台元素选项卡显示：

<midi-sheet _ngcontent-hvr-c2="" _nghost-hvr-c4="" ng-reflect-device="[object Object]"><div _ngcontent-hvr-c4="" id="MidiThroughPort-0"></div></midi-sheet>

但是页面中没有可见的工作表。

标签： angularabcjs

解决方案

我没有使用 Angular 的示例，但这里有一个使用 Vue 的示例：https ://github.com/paulrosen/vue-abcjs-basic-demo/blob/master/src/components/HelloWorld.vue

它看起来与您正在做的事情非常相似。

我注意到的第一件事是，您不应该在传入的元素 ID 中使用“#”。也许就是这样。所以const elementName: string = name;

这是我要调试的内容：

1）在abcjs.renderAbc(elementName, tune, {});被调用的时候，是否有一个带有 id 的可见元素elementName？

2）查看sheet返回的值。它应该是一个包含一个项目的数组。里面应该有合理的数据。例如，sheet[0].lines[0].staff[0].voices[0]应该返回一个笔记数组。

推荐阅读