Angular+Firebase笔记应用添加项目时console.log打印两次问题咨询

问题原因 #

你猜测的ngOnInit重复触发不成立，该钩子仅在组件初始化挂载时执行一次，新增笔记时不会重新触发，两次打印的实际原因如下：

• 订阅泄漏：你调用的getNotepads()是Firebase提供的长连接Observable，只要没有主动取消订阅就会一直存活。如果NotepadComponent被反复销毁重建（比如路由来回切换到对应页面），旧的订阅没有被释放，新的订阅又会在组件初始化时创建，后续每次数据更新所有存活的订阅都会触发回调，就会出现打印2次甚至更多次的情况，这是最常见的诱因。
• Angular开发模式双重变更检测：Angular在开发环境默认会执行两次变更检测来校验数据一致性，避免出现单次检测后数据被意外修改的异常。如果subscribe回调触发时刚好处于变更检测周期内，console.log就会被执行两次，该问题在生产环境打包后会自动消失。
• 小概率为NotepadService中getNotepads方法的内部逻辑问题，比如同一个数据源被重复emit推送。

修复方案 #

优先处理订阅泄漏问题，推荐用takeUntil操作符手动管理订阅生命周期，代码修改如下：

1. 引入RxJS相关API

import { Subject, takeUntil } from 'rxjs';

2. 组件内新增销毁信号Subject和OnDestroy生命周期钩子

export class NotepadComponent implements OnInit, OnDestroy {
  // 原有属性不变
  private destroy$ = new Subject<void>();

  // 原有方法不变

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 修改订阅逻辑，绑定销毁信号

ngOnInit(): void {
  this.notepadService.getNotepads()
    .pipe(takeUntil(this.destroy$))
    .subscribe(notepad => {
      this.notepads = notepad;
      console.log(this.notepads);
    })
}

如果修改后开发环境还有两次打印，属于开发模式的正常表现，生产环境打包后会自动消失，无需额外处理。

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