Question

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

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

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

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

private selectedOption: SelectOptionComponent;

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

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

Answer 1

我只是大声思考，但是：

将ElementRef注入SelectOptionComponent并将其公开。
将ElementRef注入您选择的组件中。
将一个setter函数添加到选择组件中的selectedOption上，触发该函数后，它会执行selectedOption.el.nativeElement. // gets dom node并将其复制到选择组件的dom中要复制到的任何位置（使用{{1} }）。

即

ElementRef

很显然，这将不会对Angular Universal / SSR友好。就个人而言，我不会直接接触dom。相反，我可能使用angular renderer将组件插入dom。或者，更有可能的是，我只是使用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) }来切换特殊的“选定”组件/视图。

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

将组件实例插入DOM

2 个答案: