Question

我想实现动态绑定component文件的svg，并将其内容加载到组件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 based on its security rules。许多SVG可能正在被消毒，包括样式规则。

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

import { DomSanitizer } from '@angular/platform-browser';

this.svgTemplate = this.domSanitizer.bypassSecurityTrustHtml(svg);

动态SVG组件

1 个答案: