在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图像。