Angular 9 - использование @ContentChildren

Question

У меня есть ButtonGroupComponent , в котором мне нужно отобразить два типа дочерних элементов: ButtonActionComponent или ButtonNavigationComponent .

Мне нужно проецировать эти дети через @ContentChildren, но что я могу сделать, так как невозможно передать оба селектора?

@ContentChildren(??)
  public children: QueryList<??>;

Итак, я попробовал другое решение: я создал компонент, GroupableButtonComponent, который расширяется двумя ( ButtonActionComponent и ButtonNavigationComponent ).

А затем я передал этот компонент ContentChildren напрямую:

@ContentChildren(GroupableButtonComponent)
  public children: QueryList<GroupableButtonComponent>;

Но я обнаружил, что дочерние элементы остаются пустыми.

Еще одно решение, которое я пробовал, заключалось в использовании внедрения зависимостей и создании a GroupableButton class:

export class GroupableButton {
}

где ButtonActionComponent :

@Component({
      selector: "button-action",
      template: `
        ...
      `,
      providers: [{ provide: GroupableButton, useClass: ButtonActionComponent }],
    })
    export class ButtonActionComponent {
        ...
    }

и ButtonNavigationComponent :

@Component({
      selector: "button-navigation",
      template: `
        ...
      `,
      providers: [{ provide: GroupableButton, useClass: ButtonNavigationComponent }],
    })
    export class ButtonNavigationComponent {
        ...
    }

Я использовал его так:

@ContentChildren(GroupableButton)
  public children: QueryList<GroupableButton>;

, но поскольку внутри моего компонента ButtonGroupComponent у меня есть:

...

this.children
  .toArray()
  .slice(0, visibleButtons)
  .reverse()
  .forEach((button) => {
    const factory = this.factoryResolver.resolveComponentFactory(
      GroupableButton
    );

    const component = this.visibleButtonsContainer.createComponent(
      factory,
      0,
      null,
      [[button.element.nativeElement]]
    );
    this.clonePropertiesFrom(button, component.instance);
    this.buttons.push(component);
  });

...

на этот раз проблема в том, что я не могу пройти GroupableButton в качестве компонентов входа внутри моего модуля.

Answer 1

сначала, а не поставщиков, которые у вас есть, сделайте следующее:

providers: [{ provide: GroupableButton, useExisting: forwardRef(() => ButtonActionComponent) }],

это гарантирует, что вы получаете правильный компонент, и можете oop ваши компоненты по своему усмотрению.

Я не уверен, что это решит вашу проблему с созданием экземпляров, но вместо того, чтобы создавать экземпляры компонентов вручную, вы учли старый добрый тег ng-content в шаблоне компонента?

<!-- put this where ever you want to project your buttons.... -->
<ng-content></ng-content>

Answer 2

Вы слишком усложняете решение.

Почему бы просто не запросить два компонента с помощью строкового селектора:

@ContentChildren('templateRef1, templateRef2') allTypesOfButtons: QueryList<ButtonActionComponent | ButtonNavigationComponent>;

Я нашел время, чтобы поместить пример на stackblitz