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通过扩展抽象类

1 个答案: