如何在 Angular 8 中动态将字符串渲染为 SVG

Question

我有下面给出的图标为 SVG 字符串的项目列表steps=[        {            "id": 1,            "code": "ABC",            "dname": "abc",            "conveyStep": null,            "sequence": 1,            "fqcn": null,            "status": "A",            "icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">    <defs>    </defs>    <g id="noun_Document_188541" transform="translate(-15 -5)">        <g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">            <path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>            <path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>            <path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>            <path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>            </g>        </g>    </g></svg>`        },{...}];...现在我想在HTML中将这些SVG 字符串显示为SVG ，但它不显示我的 SVG<div class="scrollmenu" id="scroll_menu">    <div class="steps" *ngFor="let step of newSteps">        <p class="completed"></p>        <p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"><i class="fa fa-check-circle"                aria-hidden="true"></i></p>        <div class="step-image">          \\here I want to show my svg        </div>    </div></div>我想根据某些条件为某些 svg 提供样式，那么有没有办法也为动态添加的 avg 提供样式？任何帮助，将不胜感激。

Answer 1

所以基本上我在忽略 DomSanitizer 后遇到了安全问题，所以我去了https://angular.io/guide/security#xss并总结并更改了我的代码以获得我想要的。我导入了 DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';

....

newSteps=[];

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {

    for (let i = 0; i < this.steps.length; i++) {

      this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));

    }

}

然后只需使用[innerHTML]标记 html 文件

 <div id="steps" class="step-image" [innerHTML]="step">

  </div>

Answer 2

您可以创建一个指令，该指令接受 svg 字符串并将其添加到其宿主元素的innerHTML 中。然后使用该指令将样式动态应用到内部 svg。

注意：这会绕过 Angular 的DomSanitizer，并使您容易受到 XSS 漏洞的影响。仅当您信任 svg 字符串的来源时才使用此方法。

@Directive({

  selector: '[svgIcon]',

})

export class SvgIconDirective implements OnChanges {

  @Input()

  svg?: string;

  constructor(

    private _elementRef: ElementRef,

  ) {}

  ngOnChanges(changes: SimpleChanges) {

    if (changes.svg) {

      this._elementRef.nativeElement.innerHTML = '';

      if (this.svg) {

        this._elementRef.nativeElement.innerHTML = this.svg;

      }

    }  

  }

}