我有下面給出的圖標為 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 提供樣式？任何幫助，將不勝感激。
2 回答
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
所以基本上我在忽略 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>
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
您可以創建一個指令，該指令接受 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;
? ? ? }
? ? }??
? }
}
- 2 回答
- 0 關注
- 190 瀏覽
添加回答
舉報
0/150
提交
取消