innerHTML 不设置 SVG 元素的值

Question

我有一个正在运行的 Angular 7 应用程序，我想根据下拉选择更新文本元素的值。例如：如果文本元素的 id 为 10，则将文本的值从 'hi' 更新为 'hello'。我正在使用 setProperty innerHTML 来更新文本的值，它在 Chrome 中工作正常，但是如果我在 IE 中尝试相同的行为，文本值不会得到更新。<text id='10'>hi</text>svgElement: SVGElement;pathElement: HTMLElement;constructor(private renderer: Renderer2) { }this.pathElement = svgElement.querySelector(`[id='10']`);this.renderer.setProperty(this.pathElement, 'innerHTML', 'hello');

Answer 1

我没有意识到答案会很简单。实际上，不需要使用 renderer、setProperty、innerHTML 来设置 SVG 元素的值。我们可以简单地使用textContent来设置值。它适用于所有浏览器。

pathElement: SVGTextElement;

this.pathElement = svgElement.querySelector(`[id='10']`);

this.pathElement.textContent = 'hello'

Answer 2

使用DomSanitizer

像这样尝试：

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

constructor(private renderer: Renderer2, private domSanitizer: DomSanitizer){}

this.pathElement = svgElement.querySelector(`[id='10']`);

this.renderer.setProperty(this.domSanitizer.bypassSecurityTrustHtml(this.pathElement), 'innerHTML', 'hello');