Angular 16中TypeScript基类通用功能实现异常问题排查

问题背景 #

我们正在将组件重构为独立可复用组件，请注意当前使用Angular 16，暂无法升级至新版本。
尝试创建一个基类来处理错误提示、加载状态等通用功能，但基类中的BehaviorSubject除了在ngOnInit中之外无法更新。期望传递一个布尔值以标识服务调用成功，让base.component.html第6行显示false。已尝试多种方法但均未成功，可能是对TypeScript基类的理解与熟悉的C#存在偏差。

问题根源 #

代码存在关键错误：HomeComponent继承了BaseComponent，但同时在自身模板中又实例化了一个独立的<app-base>组件。这导致两个完全分离的BaseComponent实例：

• 一个是HomeComponent继承的实例（调用inheritEvent时更新的是这个实例的isLoading$）
• 另一个是模板中<app-base>标签创建的实例（页面上显示的是这个实例的isLoading$）

因此，调用inheritEvent更新的是后台实例，而页面渲染的是另一个实例，自然看不到状态变化。

解决方案一：正确使用组件继承（推荐） #

利用Angular组件继承特性，让HomeComponent直接复用BaseComponent的模板和逻辑，无需在模板中再次实例化<app-base>。通过ng-content实现内容投影，替代原来的templateRef输入属性。

修改后代码：

base.component.ts

import { CommonModule } from "@angular/common";
import { Component, OnInit } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class BaseComponent implements OnInit {
    isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

    constructor() { }

    ngOnInit() { }

    updateLoadingState(isLoading: boolean) {
      this.isLoading$.next(isLoading);
    }
}

base.component.html

<div>
  <p>
    This is the base.component.html
  </p>
  <p>
    isLoading$: {{ isLoading$ | async }}
  </p>
  <!-- 使用ng-content接收子组件的内容投影 -->
  <ng-content></ng-content>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../base.component';
import { FooService } from '../service/foo.service';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  // 继承BaseComponent的模板
  templateUrl: '../base.component.html',
  styleUrls: ['./home.component.scss'],
  standalone: true,
  imports: [CommonModule],
  providers: [FooService]
})
export class HomeComponent extends BaseComponent implements OnInit {

  constructor(private fooService: FooService) {
    super();
   }

  override ngOnInit(): void {
    this.fooService.getFoo(1234).subscribe(f => {
      console.log(`foo Service has been called successfully: ${f}`);
      // 直接调用基类方法更新状态
      this.updateLoadingState(f);
    });
  }
}

home.component.html

<!-- 内容会被投影到BaseComponent的ng-content位置 -->
This is from home.component.html

解决方案二：使用组合模式（替代继承） #

如果更倾向于组合而非继承，可保留<app-base>在HomeComponent模板中，通过输入属性直接传递状态：

base.component.ts

import { CommonModule } from "@angular/common";
import { Component, Input, OnInit, TemplateRef } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class BaseComponent implements OnInit {
    @Input() templateRef: TemplateRef<any> | null = null;
    @Input() set isLoading(value: boolean) {
      this.isLoading$.next(value);
    }
    isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

    constructor() { }

    ngOnInit() { }
}

home.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BaseComponent } from '../base.component';
import { FooService } from '../service/foo.service';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  standalone: true,
  imports: [BaseComponent, CommonModule],
  providers: [FooService]
})
export class HomeComponent implements OnInit {
  isLoadingState = true;
  @TemplateRef() homeTemplate!: TemplateRef<any>;

  constructor(private fooService: FooService) { }

  ngOnInit(): void {
    this.fooService.getFoo(1234).subscribe(f => {
      console.log(`foo Service has been called successfully: ${f}`);
      this.isLoadingState = f;
    });
  }
}

home.component.html

<app-base [templateRef]='homeTemplate' [isLoading]="isLoadingState">
  <ng-template #homeTemplate>
    This is from home.component.html
  </ng-template>
</app-base>

TypeScript vs C# 基类关键区别 #

在C#中，子类实例是基类实例的扩展，但Angular组件继承需注意：

• 组件模板是独立的，除非显式指定继承基类模板
• 组件实例化通过模板标签触发，继承不会自动创建基类实例，子类仅拥有基类的属性和方法

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