在Angular中,可以通过使用ngFor指令和内联SVG来显示TypeScript数组中的SVG路径。以下是一个示例解决方法:
svgPaths的数组,并将SVG路径添加到该数组中。export class AppComponent {
svgPaths: string[] = [
'M10 10 L50 50',
'M20 20 L60 60',
'M30 30 L70 70'
];
}
svgPaths数组,并通过[innerHTML]绑定将SVG路径作为HTML呈现。
注意:由于Angular默认对HTML进行安全性检查,直接将SVG路径作为字符串绑定到[innerHTML]中会导致安全性错误。因此,我们需要使用Angular的内置DomSanitizer服务来绕过此检查。
DomSanitizer服务,并创建一个名为getSafeHtml的方法来返回安全的HTML。import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
export class AppComponent {
svgPaths: SafeHtml[] = [
this.getSafeHtml('M10 10 L50 50'),
this.getSafeHtml('M20 20 L60 60'),
this.getSafeHtml('M30 30 L70 70')
];
constructor(private sanitizer: DomSanitizer) {}
getSafeHtml(svgPath: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(svgPath);
}
}
getSafeHtml方法来获取安全的HTML。
现在,当你运行应用程序时,你将看到TypeScript数组中的SVG路径被正确显示为SVG图像。