parent.appendChild不是函数

Question

我想使用renderer2的append子项function，但是在移动整个组件时遇到了一些困难。这是我组件的简化版本。

ts：

@ViewChild('test', { static: false }) test;
@ViewChild('test2', { static: false }) test2;

this.renderer.appendChild(this.test, this.test2);

html：

<div #test></div>

<my-component #test2></my-component>

因此，基本上，我只想使用</my-component>函数将appendChild移到其上方的div中。但是当我执行它时，我得到了错误：

parent.appendChild is not a function

任何想法为什么会出错？

Answer 1

您应该将DOM元素传递给此方法：

@ViewChild('test', { static: false }) test: ElementRef;
@ViewChild('test2', { static: false, read: ElementRef }) test2: ElementRef;
...

this.renderer.appendChild(this.test.nativeElement, this.test2.nativeElement);