将组件实例插入DOM

Question

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

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

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

我也知道选择了哪一个选项，所以我有一个

private selectedOption: SelectOptionComponent;

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

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

Answer 1

我只是在大声思考，但是：

1. 将ElementRef注入SelectOptionComponent并将其公之于众。
2. 将ElementRef注入您的选择组件。
3. 在select组件中为selectedOption添加一个setter函数，当触发时，它执行selectedOption.el.nativeElement. // gets dom node并将其复制到你想要它复制到select组件的dom中的任何位置（使用select组件的ElementRef）。

即

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)
}

显然，这不会是Angular Universal / SSR友好。就个人而言，我不会直接触摸dom。相反，我可能会使用angular renderer在dom中插入组件。或者，更有可能的是，我只是使用ngIf来切换特殊的“选定”组件/视图。

Answer 2

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);
    }
}