如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG

Posted 2023-02-22

【中文标题】如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG

【英文标题】：How to render dynamically generated inline SVG by using custom directive in angular 6

【发布时间】：2018-12-15 04:30:19

【问题描述】：

在我的应用程序中呈现动态生成的内联 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"   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);

谁能帮帮我？

【问题讨论】：

你能为此创建一个堆栈闪电战吗？

当然@AnuradhaGunasekara

@AnuradhaGunasekara 请找到stackblitzurl 和GitHubLink

【参考方案1】：

这里是修复的参考：https://stackblitz.com/edit/g4j-structural-directive?file=src/main.ts

基本上在创建嵌入式视图之后，您可以访问根节点（在您的示例中为 div）并设置它们的 innerHTML（rxn-to-image.directive 的 37 行.ts)

【讨论】：

谢谢@g4j 它帮助了我

你能帮我选择 SVG 来改变样式，即加载后