Question

我创建了这个函数来嵌入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元素。该功能按预期工作，但我在控制台中收到这些错误

属性＆＃39; insertBefore＆＃39;在类型＆＃39; ElementRef＆＃39;。
上不存在
属性＆＃39; childNodes＆＃39;在类型＆＃39; ElementRef＆＃39;。
上不存在

我最初有targetObj:string并且它仍然有用，注意到错误是我将其更改为ElementRef的原因。有没有特别的方法来处理这个或我应该忽略错误？

更新

我只是想提到函数没有在组件内部定义。我导入它所以我可以根据需要在多个组件上使用它。这是我的组件的外观。

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

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

我注意到答案主要是基于对课堂内部事情的处理，我试图找出定义targetObj变量类型的内容，以便它将采用该元素使用@ViewChild()装饰者调用。

Answer 1

您必须使用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';
    }
}

Answer 2

查看ElementRef的界面。您将看到它有一个名为nativeElement的道具，它包含DOM节点。所以你的代码应该是： targetObj.nativeElement.insertBefore(...)。

另请注意，@ViewChild仅在某些生命周期挂钩后解析。

Answer 3

以下是代码段：

<强> app.component.html

<p #ref1> </p>

<强> app.component.ts

@ViewChild("ref1", {read: ElementRef}) ref1: ElementRef;
export function svgLoader( path: string ){
    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;
        this.ref1.nativeElement.insertBefore(b, this.ref1.nativeElement.childNodes[0]);
        //targetObj.insertBefore(b, targetObj.childNodes[0])
    }
}

参考：https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

需要帮助正确输入函数参数

3 个答案: