zjffun blog

Angular 动态插入 SVG

更新于 写于 前端

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

html
<div class="svg" [innerHTML]="svg"></div>
js
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 ››");
  }
}