Question

我有一个正在运行的Angular 7应用程序，我想根据下拉选择来更新text元素的值。

例如：如果text元素的id为10，则将text的值从“ 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

使用 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');

Answer 2

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

pathElement: SVGTextElement;

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

innerHTML未设置SVG元素的值

2 个答案: