ContentChild расширенным абстрактным классом - PullRequest
Новая
       16

ContentChild расширенным абстрактным классом

0 голосов
/ 19 июня 2019

У меня есть два разных компонента, которые расширяют общий. 

AComponent extends BaseComponent {}
BComponent extends BaseComponent {}

Есть третий компонент с ng-содержимым. 

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

К сожалению, эти компоненты не видныв сценарии ниже.

WrapperComponent {
  @ContentChildren(BaseComponent) components;
}

Я не хочу создавать ContentChild с определенными типами (Acomponent, BComponnet).

1 Ответ

1 голос
/ 20 июня 2019

вы можете использовать провайдеры псевдонимов класса в качестве обходного пути.

Определите ваши компоненты следующим образом; 

@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

...