[英]How to destroy a VexFlow renderer from an Angular component?
在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
}
}
}
不需要。您无需执行任何操作即可从视图中删除DOM元素。
当组件被销毁时,父DOM元素的所有子元素也被销毁。 包括附加到此元素的DOM事件侦听器。
您应该使用像@ViewChild这样的视图查询来访问DOM元素并将其传递给函数。 而不是直接查询文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.