angular - 为什么没有在我的自定义 Angular 2 下拉列表中填充 @ContentChildren？

Question

我正在尝试复制 Fabric 风格下拉菜单的外观，以便在 Angular 2 中使用。有两个重要的部分我正在努力做到正确:

1. 我正在使用 ngModel
2. 下拉组件在查询它们之前不知道其子项。下拉项将位于其他模板中，因为“其他”将包含需要插入的数据。

到目前为止，下拉列表和 dropdownItem 组件是这样的:

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

(AbstractValueAccessor 来自 this other answer 。)

下面是我在应用程序中实际使用它们的方式:

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

我的问题是下拉列表的@ContentChildren 查询列表始终为空，因此当我单击其中一个下拉项时它不会收到通知。为什么 QueryList 是空的，我该如何解决？我在这里错过了什么？ (我想我可以只使用服务在下拉列表和 dropdownItem 之间进行通信，而不是 QueryList，但这不是我在这里要问的 - 为什么 QueryList 是空的？)

我试过使用@ViewChildren 代替，但没有用。我尝试将 FabricDropdownItemComponent 添加到下拉列表的指令中，但这只是给出了一个不同的错误:Error: Unexpected directive value 'undefined' on the View of component 'FabricDropdownComponent'

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

Answer 1

有一个开放的issue与@ContentChildren 相关

但是对于您的特定问题，有一个解决方法是使用 HostListener

或者使用 MutationObserver