我有下面给出的图标为 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条经验 获得超13个赞
所以基本上我在忽略 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 关注
- 77 浏览
添加回答
举报
0/150
提交
取消