Angular 继承组件自增counter但基类模板未同步更新

出现这个现象的核心是对Angular组件继承的认知偏差：类层面的继承关系，和模板中通过组件选择器实例化的组件实例没有任何自动关联。你的代码里实际存在两个完全独立、各自持有独立counter属性的组件实例：

• 第一个是InheritedComponent的实例：它继承自BaseClassComponent，内存里存了一份初始值为0的counter。你点击按钮时执行的this.counter++操作，修改的就是这个实例上的属性，所以控制台能正常打印增长后的数值。
• 第二个是模板里通过<my-baseclass-component>标签渲染出来的原生BaseClassComponent实例：这是Angular独立创建的全新对象，它自己持有另一份初始值为0的counter。基类模板里写的{{ counter }}表达式，读取的是这个独立实例上的属性，和你在继承类里修改的counter根本不是同一个变量，自然不会随点击操作刷新。

根据不同的业务实现思路，可以选择以下任意一种方式解决：

• 借助已有模板引用，直接操作嵌入的基类实例
  你之前在模板里已经给基类标签加了#myBaseclass的模板引用，只要在继承类中通过@ViewChild拿到这个引用对应的实例，修改这个实例上的counter属性即可：

  export class InheritedComponent extends BaseClassComponent {
    // 通过ViewChild关联模板上的#myBaseclass引用
    @ViewChild('myBaseclass') myBaseInstance!: BaseClassComponent;
  
    click() {
      // 直接修改被模板渲染、绑定展示的那个基类实例的counter
      this.myBaseInstance.counter++;
      console.log('clicked:' + this.myBaseInstance.counter);
    }
  }
  

  这种方式不需要改动原有模板结构，点击操作修改的就是基类模板真正绑定的那份counter，变更会直接触发视图刷新。
• 去掉嵌套的基类组件标签，合并模板内容
  既然类是继承关系，完全可以把原本基类组件模板里的红色边框包裹的展示逻辑、ng-content插槽，直接合并到继承组件自己的template里。这种场景下整个应用只有一个继承类的实例，模板绑定的counter就是click方法修改的属性，不会出现两个实例分离的问题。
• 通过组件的输入输出API做跨实例通信
  给BaseClassComponent添加一个可写入的@Input()属性用来接收外部传入的计数值，把基类模板里的{{ counter }}替换为这个输入属性。继承类在自己的click方法里修改本地counter后，通过模板绑定把最新值传给嵌入的基类组件，完成视图展示更新。

内容的提问来源于stack exchange，提问作者Sam