第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在 Angular 8 中動(dòng)態(tài)將字符串渲染為 SVG

如何在 Angular 8 中動(dòng)態(tài)將字符串渲染為 SVG

呼喚遠(yuǎn)方 2023-10-24 20:29:19
我有下面給出的圖標(biāo)為 SVG 字符串的項(xiàng)目列表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>`        },{...}];...現(xiàn)在我想在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>我想根據(jù)某些條件為某些 svg 提供樣式,那么有沒(méi)有辦法也為動(dòng)態(tài)添加的 avg 提供樣式?任何幫助,將不勝感激。
查看完整描述

2 回答

?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

所以基本上我在忽略 DomSanitizer 后遇到了安全問(wèn)題,所以我去了https://angular.io/guide/security#xss并總結(jié)并更改了我的代碼以獲得我想要的。我導(dǎo)入了 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]標(biāo)記 html 文件


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

  </div>


查看完整回答
反對(duì) 回復(fù) 2023-10-24
?
鴻蒙傳說(shuō)

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以創(chuàng)建一個(gè)指令,該指令接受 svg 字符串并將其添加到其宿主元素的innerHTML 中。然后使用該指令將樣式動(dòng)態(tài)應(yīng)用到內(nèi)部 svg。

注意:這會(huì)繞過(guò) Angular 的DomSanitizer,并使您容易受到 XSS 漏洞的影響。僅當(dāng)您信任 svg 字符串的來(lái)源時(shí)才使用此方法。

@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;

? ? ? }

? ? }??

? }


}


查看完整回答
反對(duì) 回復(fù) 2023-10-24
  • 2 回答
  • 0 關(guān)注
  • 184 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)