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}
  ]
})

通过@ContentChildren查询从同一个继承的不同组件

1 个答案: