Как уничтожить рендерер VexFlow из компонента Angular? - PullRequest
Новая
       23

Как уничтожить рендерер VexFlow из компонента Angular?

0 голосов
/ 15 июня 2019

В приложении Angular я создаю средство визуализации VexFlow: 

ngAfterViewInit() {
  this.createSheet();
}
private createSheet() {
  if (this.soundtrack != null) {
    if (this.soundtrack.hasNotes()) {
      this.sheetService.createSoundtrackSheet(this.name, this.soundtrack);
    }
  }
}

, используя метод обслуживания: 

private VF = vexflow.Flow;
private renderContext(name: string, width: number, height: number) {
  const elementName = ELEMENT_PREFIX + name;
  const element = document.getElementById(elementName);
  const renderer = new this.VF.Renderer(element, this.VF.Renderer.Backends.SVG);
  renderer.resize(width, height);
  return renderer.getContext();
}

Я передаю ссылку DOM document.getElementById(elementName); наконструктор рендерера.

Должен ли я сделать некоторое освобождение в методе компонента ngOnDestroy()?

ОБНОВЛЕНИЕ: Вот как выглядит фактический полный компонент: 

export class SheetComponent implements OnInit, AfterViewInit {

  @Input() soundtrack: Soundtrack;
  @Input() device: Device;
  name: string;

  constructor(
    private sheetService: SheetService
  ) { }

  ngOnInit() {
    this.initializeName();
  }

  ngAfterViewInit() {
    this.createSheet();
  }

  private initializeName() {
    if (this.soundtrack != null) {
      this.name = NAME_PREFIX_SOUNDTRACK + this.soundtrack.name;
    } else if (this.device != null) {
      this.name = NAME_PREFIX_DEVICE + this.device.name;
    }
  }

  private createSheet() {
    if (this.soundtrack != null) {
      if (this.soundtrack.hasNotes()) {
        this.sheetService.createSoundtrackSheet(this.name, this.soundtrack);
      }
    } else if (this.device != null) {
      this.sheetService.createDeviceSheet(this.name, this.device);
    }
  }

}

с шаблоном: 

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

Теперь, возможно, есть способ использовать аннотацию @ViewChild(name) name: ElementRef;, но это не компилируется: 

export class SheetComponent implements OnInit, AfterViewInit {

  @Input() soundtrack: Soundtrack;
  @Input() device: Device;
  name: string;
  @ViewChild(name) sheetElement: ElementRef;

  constructor(
    private sheetService: SheetService
  ) { }

  ngOnInit() {
    this.initializeName();
  }

  ngAfterViewInit() {
    this.createSheet();
  }

  private initializeName() {
    if (this.soundtrack != null) {
      this.name = NAME_PREFIX_SOUNDTRACK + this.soundtrack.name;
    } else if (this.device != null) {
      this.name = NAME_PREFIX_DEVICE + this.device.name;
    }
  }

  private createSheet() {
    if (this.soundtrack != null) {
      if (this.soundtrack.hasNotes()) {
        this.sheetService.createSoundtrackSheet(this.sheetElement.nativeElement.id, this.soundtrack);
        // this.soundtrackStore.setSoundtrackSheet(this.name, sheet); TODO
      }
    } else if (this.device != null) {
      this.sheetService.createDeviceSheet(this.sheetElement.nativeElement.id, this.device);
      // this.deviceStore.setDeviceSheet(this.name, sheet); TODO
    }
  }

}

1 Ответ

0 голосов
/ 15 июня 2019

Нет.Вам не нужно ничего делать для удаления элементов DOM из представления.

Когда компонент уничтожается, все дочерние элементы родительских элементов DOM также уничтожаются.Включая слушателей событий DOM, прикрепленных к этим элементам.

Вы должны использовать запрос вида, такой как @ViewChild, чтобы получить доступ к элементу DOM и передать его функции.Вместо того, чтобы запрашивать документ напрямую.

...