Как отобразить строку как SVG динамически в Angular 8

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>`
        },
{
...
}
];
...

, теперь я хочу показать эти строку SVG как SVG в моем HTML, но он не показывает мой 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

Вы можете создать директиву, которая принимает строку svg и добавляет ее к внутреннему HTML своего элемента host. Затем используйте директиву для динамического применения стилей к внутреннему 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;
      }
    }  
  }

}

Answer 2

Так что в основном у меня возникали проблемы с безопасностью после игнорирования 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] tagin html file

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