01前端/Angular 动态插入 SVG

  • 更新时间：2020-09-22 03:30
  • 创建时间：2020-09-22 03:30

Angular 插入 HTML 字符串要先通过 sanitizer 处理。

1
<div class="svg" [innerHTML]="svg"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  svg:SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.svg = this.sanitizer.bypassSecurityTrustHtml("‹‹ SVG CONTENT ››");
  }
}