我在应用程序中呈现动态生成的嵌入式SVG时遇到困难。
我编写了一个自定义指令,该指令可从化学反应数据生成内联SVG。
rxn-to-image.directive.ts
@Directive({
selector: '[appRxnToImage]'
})
export class RxnToImageDirective implements OnInit {
@Input()
set appRxnToImage(rxnString: any) {
this.generateImageFromRxn(rxnString);
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private renderer: Renderer2,
private el: ElementRef
) {}
ngOnInit() {
}
private generateImageFromRxn(rxn) {
// custom method that generated inline svg dynamicaaly
MarvinJSUtil.getPackage('#marvinjs-iframe').then(marvinNameSpace => {
marvin = marvinNameSpace;
const exporter = customMethodThatCreatesExporter;
exporter.render(rxn).then(
svg => {
// once svg generated i will call applySvg method to render svg
this.applySvg(svg);
},
error => {
alert(error);
}
);
});
}
private applySvg(svg) {
this.templateRef.elementRef.nativeElement.innerHTML = svg;
this.viewContainerRef.createEmbeddedView(this.templateRef);
}
}
SVG会这样:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="225" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: hidden; "><</svg>
像这样从模板调用指令:
<div *appRxnToImage="reactionString"></div>
我想在div中渲染生成的嵌入式SVG。
这样渲染SVG。
this.templateRef.elementRef.nativeElement.innerHTML = svg;
this.viewContainerRef.createEmbeddedView(this.templateRef);
有人可以帮我吗?
这是对该修补程序的参考:https : //stackblitz.com/edit/g4j-structural-directive?file= src/ main.ts
创建嵌入视图后基本上,你可以访问根节点(在你的例子在div),并设置的innerHTML他们(线37的RXN到image.directive.ts)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句