动态 SVG 组件

Question

我想实现一个动态绑定svg文件的component，并将他的内容加载到组件template中。

目前，我尝试了这种方式：

icon.component.ts

...
@Component({
    selector: 'app-icon',
    template: `
        <div [innerHTML]="svgTemplate">
        </div>
    `,
})
export class IconComponent implements OnInit {
    @Input() name: string;
    private svgTemplate: string;
    constructor(
        private http: Http
    ) { }
    ngOnInit() {
        this.http.get(`assets/icon/ic_${this.name}.svg`).map(response => response.text()).subscribe(svg => {
            this.svgTemplate = svg;
        });
    }
}

但是svg内容似乎被转义了（模板中没有出现任何内容div）。

下面是一个内容svg示例：

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 52.4 44.1" style="enable-background:new 0 0 52.4 44.1;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#444444;}
</style>
<g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-312H-312v6.4h52.4V-312z"/>
    </g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-293.1H-312v6.4h52.4V-293.1z"/>
    </g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-274.3H-312v6.4h52.4V-274.3z"/>
    </g>
</g>
</svg>

Answer 1

如果

源可能不受信任，Angular 会根据其安全规则自动清理 HTML。许多 SVG 可能正在被清理，包括样式规则。

如果您信任 svg 的来源，则可以使用 DomSanitizer 绕过此操作。请注意，这可能会使您容易受到注入攻击，但由于您控制着为 svg 提供服务的服务器，因此与从您无法控制的源检索它相比，它的风险要小一些。然而，这并不意味着没有风险。

import { DomSanitizer } from '@angular/platform-browser';
this.svgTemplate = this.domSanitizer.bypassSecurityTrustHtml(svg);