Angular13中BehaviorSubject转Observable后next()事件未被订阅捕获

问题现象 #

在Angular 13项目的SignupPage组件中，执行this.invitedCount.next(successCount)时，控制台可以看到next前的打印日志，但构造函数中注册的订阅回调从未触发，回调内的日志和业务逻辑完全不执行，代码中也没有编写任何主动取消订阅的逻辑。
对应的简化组件代码如下：

import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {
    private invitedCount : BehaviorSubject<number> = new BehaviorSubject(0);
    currentInvitedCount = this.invitedCount.asObservable();
} // 类闭合括号位置错误

constructor() { 
    this.currentInvitedCount.subscribe(count => {
      console.log('All inviting learners were linked observable. Count: ', count);
      if (count == this.invitingPersons.length) {
        this.notifyInvitingLearners(true);        
      }
    });
}


myFunction() {
    // 其他业务逻辑
    if (result!=null) {
      console.log('successfuly assigned Helper to Learner: ', JSON.stringify(resultAssign));         
      successCount++;
      console.log('Emitting successCount: ', successCount);
      this.invitedCount.next(successCount); // 触发事件
    }
}

控制台输出如下：

successfuly assigned Helper to Learner:  [{"keyHelper":"H0972000547780993"}]
Emitting successCount:  1
...
...

根本原因 #

核心问题是类的闭合大括号位置错误：
你在定义完invitedCount和currentInvitedCount两个类属性后，直接写了}闭合了SignupPage类，导致后续的constructor构造函数、myFunction方法都处于类的外部，不属于SignupPage类的成员，直接引发两个问题：

• 写在类外部的constructor根本不是Angular组件的构造函数，Angular实例化SignupPage组件时完全不会执行这段代码，订阅逻辑从未被注册，自然不会收到任何事件。
• 写在类外部的myFunction也不是组件类的原型方法，你在业务中实际调用的组件实例方法、模板绑定的方法和你写的这段next逻辑不在同一个上下文里。
  正常TypeScript语法下，类外部编写constructor会直接抛出编译错误，如果你本地没有收到报错，大概率是IDE或构建配置的校验暂时失效，没有及时抛出语法问题。

修复方案 #

把类的闭合大括号移动到类成员（构造函数、方法、生命周期钩子等）的最末尾，确保所有类成员都包裹在export class SignupPage implements OnInit { ... }的大括号内部，修正后的代码结构如下：

import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {
    private invitedCount : BehaviorSubject<number> = new BehaviorSubject(0);
    currentInvitedCount = this.invitedCount.asObservable();

    constructor() { 
      this.currentInvitedCount.subscribe(count => {
        console.log('All inviting learners were linked observable. Count: ', count);
        if (count == this.invitingPersons.length) {
          this.notifyInvitingLearners(true);        
        }
      });
    }

    ngOnInit(): void {
    }

    myFunction() {
      // 其他业务逻辑
      if (result!=null) {
        console.log('successfuly assigned Helper to Learner: ', JSON.stringify(resultAssign));         
        successCount++;
        console.log('Emitting successCount: ', successCount);
        this.invitedCount.next(successCount);
      }
    }
} // 类闭合括号移动到所有成员末尾

修正后Angular实例化组件时会正常执行构造函数内的订阅逻辑，后续调用next发射值时订阅回调就能正常触发了。

额外注意：如果修正括号位置后仍有问题，需要检查是否存在中途重新给this.invitedCount赋值新的BehaviorSubject实例的逻辑，这种情况会导致订阅绑定在旧的Subject实例上，新实例发射的值无法被接收。

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