我正在制作一个选择框(选择+选项)。
在选择组件中,我有一个选项组件实例列表:
@ContentChildren(forwardRef(() => SelectOptionComponent)) private options: QueryList<SelectOptionComponent>;
我也知道选择了哪个选项,所以我有一个
private selectedOption: SelectOptionComponent;
属性。现在,我想将所选选项显示到Select-box主顶部框架中(关闭选项列表时,选择框的剩余内容)。因为我想显示任何内容而不仅仅是文本,所以我想“复制”选项 dom 节点并将其插入到主框架中。
我尝试了几种方法都没有成功,但我觉得应该可行。有什么线索吗?
最佳答案
我只是在大声思考,但是:
- 注入(inject)
ElementRef
进入SelectOptionComponent
并将其公开。 - 将
ElementRef
注入(inject)到您的选择组件中。 - 将 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 。
关于javascript - 将组件实例插入 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53701877/