如何在angular 8中将svg文本呈现给dom元素

ng generate directive svgText

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appSvgText]'
})
export class SvgTextDirective implements OnInit {
  @Input('appSvgText') svgContent: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    if (this.svgContent) {
      this.el.nativeElement.innerHTML = this.svgContent;
    }
  }
}

<div appSvgText [svgContent]="svgTextContent"></div>

export class YourComponent {
  svgTextContent = '<svg width="100" height="100"><text x="10" y="50">Hello SVG</text></svg>';
}

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

export class YourComponent {
  svgTextContent = '<svg width="100" height="100"><text x="10" y="50">Hello SVG</text></svg>';

  constructor(private sanitizer: DomSanitizer) {}

  get safeSvgContent() {
    return this.sanitizer.bypassSecurityTrustHtml(this.svgTextContent);
  }
}

<div appSvgText [svgContent]="safeSvgContent"></div>