如何在 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并总结并更改了我的代码以获得我想要的。我导入了 DomSanitizerimport { DomSanitizer} from '@angular/platform-browser';....newSteps=[];constructor(private sanitizer: DomSanitizer) { }ngOnInit() {&nbsp; &nbsp; for (let i = 0; i < this.steps.length; i++) {&nbsp; &nbsp; &nbsp; this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));&nbsp; &nbsp; }}然后只需使用[innerHTML]标记 html 文件&nbsp;<div id="steps" class="step-image" [innerHTML]="step">&nbsp; </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;      }    }    }}