javascript - 将组件实例插入 DOM

Question

我正在制作一个选择框(选择+选项)。

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

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

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

private selectedOption: SelectOptionComponent;

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

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

Answer 1

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

1. 注入(inject) ElementRef进入 SelectOptionComponent 并将其公开。
2. 将 ElementRef 注入(inject)到您的选择组件中。
3. 将 setter 函数添加到选择组件中的 selectedOption，当触发时，执行 selectedOption.el.nativeElement。//获取 dom 节点并将其复制到选择组件的 dom 中您想要复制到的任何位置(使用选择组件的 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 来切换一个特殊的“选定”组件/ View 。