类型“HTMLElement”上不存在属性“contentDocument”

Question

我正在使用 Object 元素加载 svg 文件，并尝试从 ts 文件读取和修改 svg（例如动态着色和创建一些 svg 元素并附加到现有的 svg），但遇到以下错误： 类型“HTMLElement”上不存在属性“contentDocument”

正在使用 Angular 7

在app.component.html中

 <object id="svg1" data="assets/10026_019.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>

在app.component.ts中

let obj=document.getElementById('svg1');
    let svg2=obj.contentDocument.querySelector("svg");
 let pt = svg2.createSVGPoint();

实际上它在“contentDocument”处显示错误（红线），但是当我运行该应用程序时，它工作正常，即使存在错误。 但是当我进行构建时，它出现了问题。

不确定如何纠正此错误以成功构建

Answer 1

我通过更新以下内容自行解决了这个问题。我已经明确提到对象类型为“any”。

let obj: any =document.getElementById('svg1');
    let svg2: any =obj.contentDocument.querySelector("svg");
 let pt = svg2.createSVGPoint();

Answer 2

getElementById

方法返回

HTMLElement

类型的对象。由于

HTMLElement

是一个接口，因此它不具有特定元素类型上存在的某些方法或属性。在这里，要访问

contentDocument

属性，您应该使用 type 断言 来指示

obj

变量的更具体类型，即

HTMLObjectElement

:

const obj = document.getElementById('svg1') as HTMLObjectElement;
const svg2 = obj.contentDocument.querySelector('svg');

这样您就可以拥有正确键入的变量，而无需使用

any

。