如何在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)"/>
            <path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/>
            <path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/>
            <path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/>
            <path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/>
            <g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)">
                <path id="Path_1052" d="M53.144 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1052" transform="translate(-53.078 -58.653)"/>
                <path id="Path_1053" d="M61.8 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1053" transform="translate(-58.713 -58.653)"/>
            </g>
            <g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)">
                <path id="Path_1054" d="M41.569 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.469-1.114z" class="cls-1" data-name="Path 1054" transform="translate(-36.196 -30.962)"/>
                <path id="Path_1055" d="M32.915 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.475-1.114z" class="cls-1" data-name="Path 1055" transform="translate(-30.561 -30.962)"/>
            </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;
      }
    }  
  }

}