点击浏览器返回按钮页面卡顿，出现NgxCurrencyDirective相关TypeError错误

问题描述 #

• 预期行为：点击浏览器返回按钮时，页面导航至网站首页
• 实际行为：页面卡顿，控制台抛出以下错误：

ERROR
TypeError: Cannot read properties of undefined (reading 'setOnModelChange')
 at NgxCurrencyDirective.registerOnChange (main.js:179085:24)
 at cleanUpControl (main.js:117684:23)
 at FormGroupDirective.removeControl (main.js:119752:5)
 at FormControlName.ngOnDestroy (main.js:120367:26)
 at executeOnDestroys (main.js:87499:20)
 at cleanUpView (main.js:87411:5)
 at destroyViewTree (main.js:87252:9)
 at destroyLView (main.js:87388:5)
 at ViewRef$1.destroy (main.js:92638:5)
 at ComponentRef.destroy (main.js:94492:19)

问题分析 #

该错误发生在Angular组件销毁阶段，NgxCurrencyDirective的registerOnChange方法尝试访问未定义的setOnModelChange属性。核心原因是表单控件销毁时，指令关联的模型引用已被释放，或者指令内部未处理undefined的边界情况，导致销毁流程中断，引发页面卡顿。

解决方案 #

1. 修复指令内部的空值判断
   修改NgxCurrencyDirective的registerOnChange方法，添加空值校验避免访问未定义属性：

   registerOnChange(fn: any): void {
     // 使用可选链操作符安全访问
     this.setOnModelChange?.(fn);
     // 或者用条件判断
     if (this.setOnModelChange) {
       this.setOnModelChange(fn);
     }
   }
   

2. 完善组件销毁时的表单清理逻辑
   在使用该指令的组件中，确保ngOnDestroy钩子正确清理表单控件引用：

   ngOnDestroy(): void {
     // 移除关联的表单控件，避免悬空引用
     this.yourFormGroup?.removeControl('currencyControlName');
   }
   

3. 升级NgxCurrency依赖版本
   如果使用的是第三方ngx-currency库，该问题可能是已知bug。升级到最新稳定版本，通常官方会在后续迭代中修复这类销毁阶段的异常。

4. 手动触发变更检测
   在组件销毁前调用变更检测，确保视图状态同步，避免销毁时出现状态不一致：

   import { ChangeDetectorRef } from '@angular/core';
   
   constructor(private cdr: ChangeDetectorRef) {}
   
   ngOnDestroy(): void {
     this.cdr.detectChanges();
   }
   

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