2 回答

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>

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;
? ? ? }
? ? }??
? }
}
- 2 回答
- 0 關(guān)注
- 184 瀏覽
添加回答
舉報(bào)