Angular通过服务传递表单Map数据跨组件调用MQTT连接失效问题

实现逻辑说明 #

• 实现了内置表单的模态对话框组件，用于收集用户填写的MQTT代理连接配置信息
• 组件内将表单输入数据存入Map数据结构，传递至appService供其他组件调用，点击表单按钮触发connectToBroker()方法时执行表单数据传递逻辑

表单模态对话框组件代码 #

export class BrokerConnectComponent
{
  constructor(private Form: FormBuilder, private mqtt: MqttService, private dialogRef: MatDialogRef<BrokerConnectComponent>, private appService: AppService) { }

  BrokerConnectForm = this.Form.group({
    brokerName: [''],
    brokerUsername: [''],
    brokerPassword: [''],
    brokerAddress: [''],
    brokerPort: ['']
  });

  brokerFormValues = new Map<string, any>();

  connectToBroker() 
  {
    this.brokerFormValues
    .set('brokerName', this.BrokerConnectForm.get('brokerName')?.value)
    .set('brokerUsername', this.BrokerConnectForm.get('brokerUsername')?.value)
    .set('brokerPassword', this.BrokerConnectForm.get('brokerPassword')?.value)
    .set('brokerAddress', this.BrokerConnectForm.get('brokerAddress')?.value)
    .set('brokerPort', this.BrokerConnectForm.get('brokerPort')?.value)

    this.appService.setBrokerConnectionValues(this.brokerFormValues);
    
    this.dialogRef.close();
  }
} 

跨组件数据传递服务代码 #

export class AppService 
{
  private connectionStatusSource = new Subject<number>();
  currentConnectionStatus = this.connectionStatusSource.asObservable();

  private brokerConnectionValuesSource = new Subject<Map<string, any>>();
  currentBrokerConnectionValues = this.brokerConnectionValuesSource.asObservable();

  constructor() {}

  setConnectionStatus(status: number)
  {
    this.connectionStatusSource.next(status);
  }

  setBrokerConnectionValues (values: Map<string, any>)
  {
    this.brokerConnectionValuesSource.next(values);
  }
}

业务组件读取数据代码 #

export class AppComponent implements OnInit, OnDestroy 
{
  brokerConnectionDetails = new Map<string, any>();
  brokerUsername!: string;
  brokerPassword!: string;
  brokerAddress!: string;
  brokerPort!: number;

  subscription!: Subscription;
  constructor(private appService: AppService, private mqtt: MqttService) {}

  ngOnInit(): void 
  {
    this.appService.currentBrokerConnectionValues.subscribe(values => this.brokerAddress = values.get('brokerAddress'))
    this.appService.currentBrokerConnectionValues.subscribe(values => this.brokerUsername = values.get('brokerUsername'))
    this.appService.currentBrokerConnectionValues.subscribe(values => this.brokerPassword = values.get('brokerPassword'))
    this.appService.currentBrokerConnectionValues.subscribe(values => this.brokerPort = values.get('brokerPort'))

    this.appService.currentBrokerConnectionValues.subscribe(values => this.brokerConnectionDetails = values);

    this.brokerPort = this.brokerConnectionDetails.get('brokerPort');

    this.mqtt.connect({
      hostname: this.brokerAddress, 
      username: this.brokerUsername, 
      password: this.brokerPassword, 
      port: this.brokerPort});
  }
}

问题表现 #

目前配置数据已经可以在业务组件的HTML模板中正常渲染输出，但传入mqtt.connect方法时完全无法正常运行。

问题根因 #

1. 异步时序错误：RxJS的subscribe是异步执行，在ngOnInit中刚完成订阅就同步调用mqtt.connect()，此时订阅回调还未触发，所有连接配置变量都是undefined，连接自然失败。模板能正常显示是因为后续回调执行后Angular变更检测更新了视图，但connect方法早就用空值执行完毕。
2. 订阅写法冗余：对同一个Observable重复订阅5次，产生不必要的性能开销，也容易引出时序问题。
3. 类型不匹配：Angular表单输入控件的默认返回值是字符串类型，而mqtt.connect要求port参数为数字类型，直接传字符串会导致连接异常。
4. Subject丢值问题：普通Subject不会缓存历史值，如果业务组件的订阅时机晚于表单传值的时机，会直接收不到配置数据。
5. 内存泄漏风险：订阅后没有在组件销毁时取消订阅，长期运行会产生内存泄漏。

修复方案 #

1. 替换服务中的普通Subject为ReplaySubject(1)，缓存最新的配置值，避免订阅时机导致的丢值问题：

   // 导入ReplaySubject
   import { ReplaySubject } from 'rxjs';
   
   // 替换原brokerConnectionValuesSource定义
   private brokerConnectionValuesSource = new ReplaySubject<Map<string, any>>(1);
   

2. 重构业务组件的订阅逻辑，将mqtt.connect调用放到订阅回调内部，等所有配置赋值完成后再执行连接，同时做端口类型转换，组件销毁时取消订阅：

   ngOnInit(): void 
   {
     // 单次订阅获取全量配置，无需重复订阅
     this.subscription = this.appService.currentBrokerConnectionValues.subscribe(values => {
       this.brokerConnectionDetails = values;
       this.brokerAddress = values.get('brokerAddress');
       this.brokerUsername = values.get('brokerUsername');
       this.brokerPassword = values.get('brokerPassword');
       // 将表单返回的字符串端口转为数字类型
       this.brokerPort = Number(values.get('brokerPort'));
   
       // 所有参数赋值完成后再发起连接
       this.mqtt.connect({
         hostname: this.brokerAddress, 
         username: this.brokerUsername, 
         password: this.brokerPassword, 
         port: this.brokerPort
       });
     });
   }
   
   ngOnDestroy(): void {
     // 组件销毁时取消订阅，避免内存泄漏
     this.subscription.unsubscribe();
   }
   

优化建议 #

不需要额外使用Map结构存储表单值，直接调用Angular FormGroup的getRawValue()方法返回普通对象传递即可，能省掉大量set/get的样板代码，逻辑更简洁。

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