同时使用组件继承和模板组合

问：

我读到 Angular 团队对这种模式说不，但我仍然想要它。

我正在尝试制作辅助模态。

我已经制作了提供装饰、打开状态和内容主机的基本组件。

export class BaseModalComponent {
  protected isOpen: boolean = false;

  open() {
    this.isOpen = true;
  }
  close() {
    this.isOpen = false;
  }
}

<div class="backdrop">
    <div class="modalTarget">
        <ng-content></ng-content>
    </div>
</div>

然后我有多个子组件，它们实际上是辅助模态。

export class Joe1ModalComponent extends BaseModalComponent {
  public data1!: string;
}

<base-modal *ngIf="isOpen" (click)="close()">
JOE ONE, {{ data1 }}
</base-modal>

它以这种方式工作，但是在每个 JoeN 模态中编写很无聊。*ngIf="isOpen" (click)="close()"

如果我在 BaseModalComponent 中移动此代码，它将不起作用。 始终显示在呈现的模板中，尽管变量会发生变化。isOpenfalse

为什么？Angular 模板继承的注意事项是什么，我该如何克服这个问题？