Раскрывающийся компонент углового соединения теряет выбор при последующем выборе ⇐ Html

[Anonymous]

Я создаю компонентный компонент в угловом, где элементы могут содержать пользовательские компоненты. Первоначальный выбор работает, но последующий выбор очищает предыдущий выбор. Вот моя реализация: < /p>
раскрывающееся компонент (приложение Dropdown): < /p>

Код: Выделить всё

import { DropdownitemComponent } from './dropdownitem.component';

@Component({
selector: 'app-dropdown',
template: `



Please select






`
})
export class DropdownComponent {
isOpen = false;
selectedView: any;

@ContentChildren(DropdownitemComponent) items!: QueryList;
@ViewChild('selectedContainer', { read: ViewContainerRef }) selectedContainer!: ViewContainerRef;

toggleOpen() { this.isOpen = !this.isOpen; }

selectItem(item: DropdownitemComponent) {
this.selectedContainer.clear();
this.selectedView = item.contentTemplate.createEmbeddedView({});
this.selectedContainer.insert(this.selectedView);
this.isOpen = false;
}
}

Dropdown Item Component (app-dropdownitem):

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
selector: 'app-dropdownitem',
template: `



`
})
export class DropdownitemComponent {
@ViewChild('contentTemplate') contentTemplate!: TemplateRef;
}

Usage:






Test

The Problem:

What I've Tried:
Using *ngTemplateOutlet directly
Tracking by index instead of template references
Angular CDK Portal approach
Manual view management with ViewContainerRef < /p>
Требования к ключам: < /p>
Должен поддерживать произвольные компоненты в раскрывающихся элементах < /p>
Выбранное элемент должен полностью оформить его содержимое < /p>
Составной компонентный шаблон должен быть поддержан < /p>
Почему выборочный выбор не выполняет выборы первого выбора? Как я могу сделать выбор, сохраняющийся во многих взаимодействиях при сохранении структуры составных компонентов?

Подробнее здесь: https://stackoverflow.com/questions/795 ... nt-choices