ContentChild 通过扩展摘要 class

Question

我有两个不同的组件扩展了一个通用组件。

AComponent extends BaseComponent {}
BComponent extends BaseComponent {}

第三个组件包含 ng-content。

<wrapper>
  <a-component></a-component>
  <b-component></b-component>
</wrapper>

不幸的是，这些组件在下面的场景中不可见。

WrapperComponent {
  @ContentChildren(BaseComponent) components;
}

我不想创建具有特定类型（Acomponent、BComponnet）的 ContentChild。

Answer 1

您可以使用 Aliased class providers 作为解决方法。

按如下方式定义您的组件；

@Component({
  selector: 'a-component',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css'],
  providers: [{ provide: BaseComponent, useExisting: AComponent }]
})
export class AComponent extends BaseComponent implements OnInit {
  constructor() {
    super();
    console.log("a created.");
  }

  ngOnInit() {}
}

和

@Component({
  selector: 'b-component',
  templateUrl: './b.component.html',
  styleUrls: ['./b.component.css'],
  providers: [{ provide: BaseComponent, useExisting: BComponent }]
})
export class BComponent extends BaseComponent implements OnInit {
  constructor() {
    super();
    console.log("b created.");
  }

  ngOnInit() {}
}

其中 BaseComponent 是

export abstract class BaseComponent {}

在WrapperComponent中使用如下

@Component({
  selector: 'wrapper',
  templateUrl: './wrapper.component.html',
  styleUrls: ['./wrapper.component.css']
})
export class WrapperComponent implements OnInit, AfterContentInit {
  @ContentChildren(BaseComponent) components;

  constructor() { }

  ngOnInit() { }

  ngAfterContentInit() {
    console.log("components: ", this.components.length);
  }
}

这是一个工作演示 https://stackblitz.com/edit/angular-ynqhwj

ContentChild 通过扩展摘要 class

ContentChild by extended abstract class

children

angular