绑定角度 <object> svg 数据属性

Question

我尝试了很多次绑定SVG数据路径的尝试，但似乎都没有成功。这是我的代码：

<div *ngFor="let icon of icons"">
<object type="image/svg+xml" [data]="icon.path"></object>
</div>

Ts:

public icons = [ {name: '...', path: '/svg/...svg', href: 'https://...'},..,];

我尝试使用[data]、data="｛｛…｝｝"等等。我没有得到任何特别的错误，只是我无法看到任何图像。我使用对象标记可以动态更改"fill"属性。我尝试直接在对象标记的数据属性中写入路径，它工作正常。关于如何解决这个问题有什么想法吗？

Answer 1

attr.data呢？

<div *ngFor="let icon of icons"">
<object type="image/svg+xml" [attr.data]="icon.path"></object>
</div>

如这里所示。

编辑：

最好先清理一下这条路。

<!-- COMPONENT -->
import { DomSanitizationService } from '@angular/platform-browser';
@Component({
...
})
export class SvgComponent {
private sanitizer;
constructor(sanitizer: DomSanitizationService ) {
this.sanitizer = sanitizer;    
}
svgURL(url) {
return this.sanitizer.bypassSecurityTrustUrl(url);
}
}
<!-- TEMPLATE -->
<div *ngFor="let icon of icons"">
<object type="image/svg+xml" [attr.data]="svgURL(icon.path)"></object>
</div>

Answer 2

问题是Angular会因为安全问题而阻止URL。你可以告诉Angular URL是安全的。

如下所述创建一个新的@Pipe，并在模板中使用

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform 
{
public constructor(private _domSanitizer: DomSanitizer) {}
public transform(unsafeUrl: string): SafeResourceUrl {
return this._domSanitizer.bypassSecurityTrustResourceUrl(unsafeUrl);
}
}

HTML

<object type="image/svg+xml" [data]="getUrl() | safeUrl"></object>