Electron中Angular路由跳转后组件ngOnInit未触发问题

这个问题的核心是路由跳转后新实例化的组件没有被纳入Angular变更检测周期：
Angular的ngOnInit等生命周期钩子，只有在组件第一次被变更检测流程扫描到时才会触发；而组件类的构造函数是JavaScript原生类实例化时同步执行的，只要Router匹配到路由完成组件实例创建，构造函数就会执行，和变更检测流程完全无关。
你遇到的场景里，默认路由加载的组件能正常初始化，是因为Angular启动阶段会强制执行一次全量变更检测，所有初始化阶段创建的组件都会走完完整生命周期；但路由跳转属于异步操作，跳转完成后如果没有触发Angular全局变更检测（ApplicationRef.tick()），新创建的组件就只会执行构造函数，不会触发ngOnInit。你看到的视图能正常切换，是之前为了修复Electron环境下视图不更新的问题，到处手动调用cdr.detectChanges()强制刷新了视图，但这个操作不会触发新组件的完整生命周期流程。
导致变更检测没有自动触发的核心原因基本都是Electron环境下Zone.js监控失效：

• 你大概率在服务层调用了Electron/Node.js的原生异步API（比如fs文件读写、ipcRenderer进程通信），这些API不会被Zone.js自动patch，回调执行时脱离了Angular的NgZone上下文，Angular感知不到异步操作完成，自然不会自动触发变更检测。
• 代码里到处注入ChangeDetectorRef手动调用detectChanges()属于典型的头痛医头，不仅掩盖了Zone上下文丢失的根因，甚至可能因为误调用cdr.detach()把部分组件树摘出自动变更检测流程，进一步打乱生命周期执行逻辑。

• 清理冗余的手动变更检测代码
  删掉StoryListComponent和PlotEditorComponent里注入的ChangeDetectorRef，以及所有this.cdr.detectChanges()调用。在正常的Angular Zone上下文里，点击事件、路由跳转、数据更新、异步请求完成后都会自动触发视图更新，完全不需要手动调用变更检测方法。
• 修复Electron/Node API的Zone上下文问题
  打开StoryDirectoriesService，所有调用Node原生API、Electron IPC API的回调逻辑，全部包裹在NgZone.run()里执行，保证异步逻辑执行完能通知Angular触发变更检测，参考示例：

  import { Injectable, NgZone } from '@angular/core';
  // 其余导入省略
  @Injectable({ providedIn: 'root' })
  export class StoryDirectoriesService {
    constructor(private ngZone: NgZone) {}
  
    getStories() {
      const fs = window.require('fs');
      fs.readdir('你的故事存储路径', (err, files) => {
        // 所有更新服务状态、触发组件渲染的逻辑都要放在run回调里
        this.ngZone.run(() => {
          this.storyDirectories.next(files);
        });
      });
    }
  
    // getPlotPoints方法按照同样规则修改，所有Node/Electron异步回调都要包裹
  }
  

• 检查polyfills配置
  打开src/polyfills.ts，确认import 'zone.js'放在文件最顶部，在所有Angular相关导入之前，Electron环境下不需要额外修改Zone默认配置，导入顺序正确就能正常patch浏览器异步API。
• 验证
  改完后重启应用，点击故事项跳转，控制台会正常打印Initializing plot editor日志，ngOnInit正常执行，数据自动渲染，不需要任何手动触发变更检测的代码。

如果以上操作完成后问题仍然存在，检查两个配置：

• 确认模板里的<router-outlet>没有被自定义结构指令错误包裹，没有人为干预Router的组件创建逻辑。
• 确认所有组件都正确在对应模块的declarations数组中声明，不存在多模块重复声明同一组件的情况。

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