Javascript 将组件实例插入DOM

我正在制作一个选择框（选择+选项）

在“选择组件”中，我有一个选项组件实例列表：

@ContentChildren(forwardRef(() => SelectOptionComponent)) private options: QueryList<SelectOptionComponent>;

属性。现在，我想将所选选项显示在选择框主顶部框架中（当选择框的选项列表关闭时，选择框的剩余部分）。因为我想显示任何内容，而不仅仅是文本，所以我想“复制”选项dom节点并将其插入主框架

---

我尝试了几种方法，但都没有成功，但我觉得这应该是可能的。有什么线索吗？

我只是想大声思考一下，但是：

插入

选择OptionComponent

并将其公开

将

ElementRef

注入所选组件

在select组件中的

selectedOption

中添加一个setter函数，该函数在触发时执行

selectedOption.el.nativeElement.//获取dom节点

，并将其复制到选择组件的dom中希望复制到的任何位置（使用选择组件的

ElementRef

）

i、 e

显然，这不会对角度通用/SSR友好。就我个人而言，我不会直接接触dom。相反，我可以使用在dom中插入组件。或者，更可能的是，我只需使用

ngIf

切换一个特殊的“选定”组件/视图

export class SelectOptionComponent {
    constructor(public elt: ElementRef) { }

然后

---

@trichetriche是的，但是使用现有的组件实例，而不是实例化新的组件实例。顺便说一句，我已经在其他地方使用过这种方法。你可以利用它的位置和容器溢出属性，比如dot。这是个好主意，但我想确定在这样做之前没有干净的替代方案。你有几种解决方案，比如使用，您也可以使用

@ContentChildren

获取它，但无论如何，您都必须再次复制该实例以显示它（除非您按照前面的建议移动它）。谢谢，我正在尝试使用Renderer2的解决方案，我会让您知道结果。我想我以前试过，但我无法克隆元素。

private _selectedOption: SelectedOptionComponent;

set selectedOption(option: SelectedOptionComponent) {
  this._selectedOption = option;

  // do other stuff as needed
  // e.g:
  // this.el.nativeElement.querySelector('').appendChild(option.el.nativeElement)
}

export class SelectOptionComponent {
    constructor(public elt: ElementRef) { }

export class SelectBoxComponent {
@ViewChild('label', {read: ElementRef}) labelNode: ElementRef;
private selectedOption: SelectOptionComponent;

constructor(private renderer: Renderer2) {}
...

private updateLabel() {
    Array.from(this.labelNode.nativeElement.children).forEach(child => {
        this.renderer.removeChild(this.labelNode.nativeElement, child);
    });
    if (this.selectedOption) {
        let cloned = this.selectedOption.elt.nativeElement.cloneNode(true);
        this.renderer.appendChild(this.labelNode.nativeElement, cloned);
    }
}