查詢從同一個通過@ContentChildren

Question

我想查詢一堆組件，通過ContentChildren來自同一個繼承繼承不同的組件：

<app-inputs-container> 
    <app-input-1></app-input-1> 
    <app-input-2></app-input-2> 
    <app-input-3></app-input-3> 
<app-inputs-container> 

@Component({ selector: 'app-inputs-container', ... }) 
export class InputsContainerComponent implements AfterContentInit { 
    @ContentChildren(BaseInputComponent) inputs; 

    ngAfterContentInit() { console.log(this.inputs); } 
} 

所有三個輸入繼承相同的組件：

@Component({ selector: 'app-input-1', ... }) 
export class Input1Component extends BaseInputComponent { } 

@Component({ selector: 'app-input-2', ... }) 
export class Input2Component extends BaseInputComponent { } 

@Component({ selector: 'app-input-3', ... }) 
export class Input3Component extends BaseInputComponent { } 

但我得到inputs列表爲空。

我的身邊缺少什麼東西，或者Angular不支持這種行爲？

Answer 1

你可以通過添加轉發提供商您的組件

@Component({ 
    selector: 'app-inputs-container', 
    providers: [ 
    {provide: BaseInputComponent, useExisting: Input1Component, multi: true} 
    {provide: BaseInputComponent, useExisting: Input2Component, multi: true} 
    {provide: BaseInputComponent, useExisting: Input3Component, multi: true} 
    ] 
})