为什么我的自定义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() {} 
    .... 
}