Angular 18继承组件中基组件HTML不响应数据变更问题

问题根源 #

你在子类QueryTextComponent的模板中使用了<app-query-base>，这相当于创建了一个完全独立的基组件实例，和子类继承的QueryBaseComponent类实例没有任何关联：

• 子类调用changeName修改的是自身实例的name属性，但基组件模板显示的是新实例的初始值nancy；
• 点击按钮触发的是新实例的onClick方法，自然不会执行子类重写的逻辑。

正确的实现方式 #

组件继承的是类的逻辑，而非模板的实例化。子类不需要嵌套基组件选择器，而是直接复用基类逻辑，或共享基类模板。

1. 重构基组件为抽象类（推荐）

将基组件设为抽象类，避免被意外直接实例化，同时强制子类重写必要方法：

// query-base.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-query-base',
  template: `
    <label>{{name}}</label>
    <button (click)="onClick($event)">hit me</button>
    <ng-content select="[position=bottom]"></ng-content>
  `,
  standalone: true
})
export abstract class QueryBaseComponent {
  name: string = 'nancy';

  changeName(newName: string) {
    this.name = newName;
    console.log(this.name);
  }

  // 抽象方法，强制子类实现
  abstract onClick(event: any): void;
}

2. 修改子类实现

子类继承基类后，直接使用自身模板（可复用基类模板内容），不再嵌套基组件：

// query-text.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { QueryBaseComponent } from './query-base.component';

@Component({
  selector: 'app-query-text',
  // 直接复用基类模板内容，或根据需求修改
  template: `
    <label>{{name}}</label>
    <button (click)="onClick($event)">hit me</button>
    <div position="bottom">
      <label>{{name}}</label>
    </div>
  `,
  standalone: true
})
export class QueryTextComponent extends QueryBaseComponent implements AfterViewInit {
  ngAfterViewInit() {
    this.changeName('liberace');
  }

  override onClick(event: any) {
    console.log('heir');
  }
}

3. 复用基类模板的另一种方式

如果基类模板复杂，子类可以直接引用基类的模板文件：

// query-text.component.ts
@Component({
  selector: 'app-query-text',
  templateUrl: './query-base.component.html', // 直接使用基类模板
  standalone: true
})
export class QueryTextComponent extends QueryBaseComponent implements AfterViewInit {
  ngAfterViewInit() {
    this.changeName('liberace');
  }

  override onClick(event: any) {
    console.log('heir');
  }
}

验证效果 #

修改后：

• 子类调用changeName时，模板会同步更新name的值；
• 点击按钮会触发子类重写的onClick方法，控制台输出heir。

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