在 Angular 中导入和内联 SVG？

Question

这是一个 SVG 圆：

<svg viewBox="0 0 104 104">
  <circle cx="52" cy="52" r="50" stroke="#003EFF" stroke-width="4" fill="#00FF98" />
</svg>

这个Angular Project 像这样导入它：

import circle from './circle.svg';

并将其添加到 div 元素中，如下所示：

<div [innerHTML]="svg" style="width:400px"><div>

但看起来 Angular XSS 保护正在剥离内容。有没有办法覆盖它？

我尝试了这样的DomSanitizer：

  constructor(private sanitizer: DomSanitizer) {
    this.trustedCircle = sanitizer.bypassSecurityTrustUrl(this.svg);

但没有爱。

Answer 1

我使用 Angular Material，用这个很方便：

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

在构造函数中：

constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { }

在ngInit中添加图标或图片：

    this.matIconRegistry.addSvgIcon(
        'some-icon',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
            '../img/some-icon.svg'
        )
    );

然后在你的 HTML 中：

        <mat-icon
            svgIcon="some-icon"
            class="icon-class"
            aria-label="some-icon">
        </mat-icon>

Answer 2

只需为您修复它。你可以试试看是否有效

import { Component } from '@angular/core';
import { DomSanitizer
} from '@angular/platform-browser';
import circle from './circle.svg';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  trustedCircle;
  constructor(private sanitizer: DomSanitizer) {
    this.trustedCircle = this.sanitizer.bypassSecurityTrustHtml(circle);
  }
}