angular - 需要帮助正确输入功能参数

我创建这个函数是为了嵌入svg

export function svgLoader( path: string, targetObj: ElementRef ){
    let graphic = new XMLHttpRequest;

    graphic.open('GET', path, !0),
    graphic.send(),
    graphic.onload = (a)=>{
        let b = document.createElement('div');

        b.setAttribute('style', 'visibility: hidden'),
        b.innerHTML = graphic.responseText,
        targetObj.insertBefore(b, targetObj.childNodes[0])
    }
}

targetObj参数是要取一个由@ViewChild装饰器引用的DOM元素。函数按预期工作，但是我在控制台中得到了这些错误
属性“插入前”不存在于“EngEntEnf”类型上。
属性“子节点”不存在于类型“元素”中。
我原来有targetObj:string，它仍然有效，注意到错误是为什么我把它改为元素。有没有什么特别的方法来处理这个问题，或者我应该忽略这个错误？
更新
我只是想说，函数不是在组件内部定义的。我将它导入，以便可以根据需要在多个组件上使用它。这就是我的组件的外观。

export class SomeClass implements OnInit {
     @ViewChild('svgDrop') SVGDrop: ElementRef;

    ngOnInit(){
        svgLoader('../../../../assets/tld_sprite02.svg', this.SVGDrop.nativeElement);
    }
}

我注意到这些响应主要是基于处理类内的事情，我试图找出定义targetObj变量类型的方法，以便它接受用@ViewChild()装饰器调用的元素。

最佳答案

必须使用nativeElement对象的ElementRef属性：

targetObj.nativeElement.insertBefore(b, targetObj.childNodes[0])

因为insertBefore实际上是本机dom属性，而不是targetObj本身的属性。
以下是Angular documentation的完整示例：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

关于angular - 需要帮助正确输入功能参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49542063/