订阅完成后跳转组件报错：control._registerOnCollectionChange未定义

这个错误的核心不是路由跳转逻辑本身的问题，而是在路由跳转销毁Dashboard页面（MainComponent）时，Angular尝试清理表单控件时出错——错误栈明确指向FormControlDirective.ngOnDestroy阶段，说明你的MainComponent里存在表单控件绑定不合法的情况。

可能的原因 #

• 模板中使用formControl指令绑定了非FormControl实例的变量，比如把普通字符串/对象当成FormControl绑定。
• 组件代码中，原本的FormControl实例被意外替换成了普通对象（比如在某个逻辑里给FormControl属性重新赋值为非FormControl类型）。
• 模板驱动表单中，ngModel绑定的属性存在生命周期异常（比如属性被提前销毁）。

解决步骤 #

1. 检查MainComponent的表单绑定
   打开MainComponent的模板文件，查找所有formControl、formControlName或[(ngModel)]的绑定：

   • 如果是响应式表单，确保[formControl]="xxx"中的xxx是组件中通过new FormControl()或formBuilder.control()创建的合法实例，没有被重新赋值为普通类型。
   • 错误示例（绑定了普通字符串）：

     <!-- 错误：myControl是普通字符串，不是FormControl -->
     <input [formControl]="myControl">
     

     正确写法：

     // 组件中定义
     myControl = new FormControl('');
     

     <input [formControl]="myControl">
     

2. 排查组件内的表单控件修改逻辑
   检查MainComponent的代码，确认没有在订阅、异步操作中修改表单控件的引用，比如：

   // 错误：把FormControl替换成了普通字符串
   this.myControl = 'test';
   

3. 手动清理表单订阅（可选）
   如果组件中存在表单控件的订阅，在ngOnDestroy中取消订阅，避免控件状态异常：

   import { Subscription } from 'rxjs';
   
   // 组件内定义订阅变量
   private formSub: Subscription;
   
   ngOnInit() {
     this.formSub = this.myControl.valueChanges.subscribe(...);
   }
   
   ngOnDestroy() {
     this.formSub?.unsubscribe();
   }
   

验证 #

修改完成后，重新触发跳转逻辑，确认组件销毁时不再出现该错误。

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