Почему не заполняется @ContentChildren в моем выпадающем меню Angular 2?

Question

Я пытаюсь воспроизвести внешний вид ткани стиля выпадающего списка, для использования в угловых 2. Есть два важных бита я пытаюсь получить права:

1. Я использую ngModel
2. Выпадающий компонент не знает о своих дочерних элементах, пока не запросит их. Выпадающие элементы будут находиться в шаблоне какого-то другого, потому что это «что-то еще», которое будет иметь данные, которые необходимо вставить.

Вот что я до сих пор для раскрывающихся и dropdownItem компонентов: (. AbstractValueAccessor исходит от this other answer)

@Component({ 
    selector: "dropdown", 
    template: ` <div class="ms-Dropdown" [ngClass]="{'ms-Dropdown--open': isOpen}"> 
        <span class="ms-Dropdown-title" (click)="toggleDropdown()"> {{selectedName}} </span> 
        <ul class="ms-Dropdown-items"> 
         <ng-content></ng-content> 
        </ul> 
       </div>`, 
    providers: [QueryList] 
}) 
export class FabricDropdownComponent extends AbstractValueAccessor implements AfterContentInit { 
    public selectedName: string; 
    public isOpen: boolean; 
    private subscriptions: Subscription[]; 
    constructor(@ContentChildren(FabricDropdownItemComponent) private items: QueryList<FabricDropdownItemComponent>) { 
     super(); 
     this.subscriptions = []; 
     this.selectedName = "Filler text, this should be replaced by 'Thing'"; 
     this.isOpen = false; 
    } 

    // HERE'S THE PROBLEM: this.items is an empty array, so I can't find any child components. 
    public ngAfterContentInit() { 
     this.items.changes.subscribe((list: any) => { 
      // On every change, re-subscribe. 
      this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe()); 
      this.subscriptions = []; 
      this.items.forEach((item: FabricDropdownItemComponent) => { 
       this.subscriptions.push(item.onSelected.subscribe((selected: INameValuePair) => { 
        this.value = selected.value; 
        this.selectedName = selected.name; 
        this.isOpen = false; 
       })); 
      }); 
     }); 

     // During init, display the *name* of the selected value. 
     // AGAIN: items is empty, can't set the initial value. What's going on? 
     this.items.forEach((item: FabricDropdownItemComponent) => { 
      if (item.value === this.value) { 
       this.selectedName = item.name; 
      } 
     }) 
    } 

    public toggleDropdown() { 
     this.isOpen = !this.isOpen; 
    } 
} 

@Component({ 
    selector: "dropdownItem", 
    template: `<li (click)="select()" class="ms-Dropdown-item" [ngClass]="{'ms-Dropdown-item--selected': isSelected }">{{name}}</li>` 
}) 
export class FabricDropdownItemComponent implements OnInit { 
    @Input() public name: string; 
    @Input() public value: any; 
    @Output() public onSelected: EventEmitter<INameValuePair>; 
    public isSelected: boolean; 
    constructor() { 
     this.onSelected = new EventEmitter<INameValuePair>(); 
     this.isSelected = false; 
    } 

    public ngOnInit() { 
     if (!this.name) { 
      this.name = this.value.toString(); 
     } 
    } 

    public select() { 
     this.onSelected.emit({ name: this.name, value: this.value }); 
     this.isSelected = true; 
    } 

    public deselect() { 
     this.isSelected = false; 
    } 
} 

И вот как я на самом деле использовать их в приложении:

<dropdown [(ngModel)]="responseType" ngDefaultControl> 
    <dropdownItem [value]="'All'"></dropdownItem> 
    <dropdownItem *ngFor="let r of responseTypes" [value]="r.value" [name]="r.name"></dropdownItem> 
</dropdown> 

Моя проблема заключается в том, что в раскрывающемся списке в QueryList из @ContentChildr en всегда пуст, поэтому он не получает уведомления, когда я нажимаю на один из dropdownItems. Почему QueryList пуст, и как я могу это исправить? Что я пропустил здесь? (Я полагаю, что я мог бы просто использовать сервис для связи между выпадающим списком и dropdownItem, а не QueryList, но это не то, о чем я спрашиваю здесь - почему QueryList пуст?)

Я пробовал использовать @ViewChildren вместо этого, но это не сработало. И я попытался добавить FabricDropdownItemComponent с директивами выпадающего списка, но это как раз дал другую ошибку: Error: Unexpected directive value 'undefined' on the View of component 'FabricDropdownComponent'

Plunker: https://plnkr.co/edit/D431ihORMR7etrZOBdpW?p=preview

Answer 1

Существует открытая issue связанные с @ContentChildren

Однако для конкретной задачи есть обходной путь, используя HostListener

Или используйте MutationObserver

Answer 2

M аке

@ContentChildren(FabricDropdownItemComponent) private items: QueryList<FabricDropdownItemComponent> 

свойство вашего класса вместо параметра конструктора

export class FabricDropdownComponent extends AbstractValueAccessor implements AfterContentInit { 
    @ContentChildren(FabricDropdownItemComponent) private items: QueryList<FabricDropdownItemComponent> 
    constructor() {} 
    .... 
}