爲什麼我的自定義Angular 2下拉列表中沒有填充@ContentChildren？

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> 

我的問題是@ContentChildr的下拉的QueryList en總是空的，所以當我點擊其中一個dropdownItem時，它不會收到通知。爲什麼QueryList是空的，我該如何解決這個問題？我在這裏錯過了什麼？ （我想我可以只使用一個服務在dropdown和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

還有就是@ContentChildren

但是你的特定問題相關的開放issue有使用HostListener

或者使用MutationObserver

Answer 2

米的解決方法AKE

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

類的屬性，而不是構造函數的參數

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