派生和子类化指令以便 ContentChildren 可以找到它？

Question

我有一个组件 HelloComponent。该组件采用 MyButtonDirective 类型的所有内容子项，并为每个子项呈现一个按钮标记。

@Component({
  selector: 'hello',
  template: `
  <p>{{buttons.length}}</p>
  <button *ngFor="let b of buttons" (click)="b.onClick()">{{b.text}}</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @ContentChildren(MyButtonDirective, {descendants: true}) buttons: QueryList<MyButtonDirective>;
}


@Directive({
  selector: 'my-button'
})
export class MyButtonDirective  {
  @Input() text: string;
  @Output() click: EventEmitter<any> = new EventEmitter<any>();

  onClick() {
    console.log('my-button clicked');
    this.click.emit();
  }
}

有没有一种方法可以子类化或从 MyButtonDirective 派生来创建一个新的指令 och 组件，该组件将包含在 HelloComponent 的 contentchildren 中？

<hello>
  <my-button></my-button>
  <my-button></my-button>
  <extra-button></extra-button>   <-- How can this be included in contenchildren of Hello?
</hello>

我为此创建了一个Stackblitz。

Answer 1

为了简化，我创建了 AbstractButton

abstract class AbstractButton {
    text: string;
    abstract onClick();
}

现有的MyButtonDirective 和ReplayButton 现在扩展了AbstractButton

@Directive({
    selector: 'my-button',
    providers: [{provide: AbstractButton, useExisting: forwardRef(() => MyButtonDirective)}]
})
export class MyButtonDirective extends AbstractButton {
    ...
}

HelloComponent 保持不变，除了 ContentChildren 中的类型

...
export class HelloComponent  {
    @Input() name: string;
    @ContentChildren(AbstractButton, {descendants: true}) buttons: QueryList<AbstractButton>;
}

我还看到您有 ExtraButtonComponent，它具有模板 <my-button>，但我不确定这是否可行，因为它位于另一个组件中并且是该组件的子组件

查看StackBlitz Demo here。