angular - “在 Angular 区域外触发导航”解释

Question

我正在使用 Angular 开发一个 Electron 应用程序。我创建了一个 Electron 菜单项，其中 click() 将一个 IPC 发送到 app.component.ts 以更改 View 。下面的代码有效，但如果我直接调用 router.navigateByUrl，我会在 DevTools 中收到以下错误:

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

如您所见，我现在通过 ngZone 调用 router.navigateByUrl 来解决问题，但是尽管在文档中阅读了 NgZone 并在此处和其他地方进行了搜索，但我不明白这是做什么的或为什么我需要这样做。

直接调用 this.router.navigateByUrl 有什么问题？

为什么它告诉我调用在 Angular 区域之外，当它在 app.component.ts 中调用时？

Electron
main.js

function sendToAngularRouter(request)
{
    console.log('sending request');
    win.webContents.send('routeToPage', request);
}

Angular
app.component.ts

export class AppComponent implements OnInit {

    constructor(public electronService: ElectronService, 
         private router: Router, private zone: NgZone) {}

    ngOnInit() {
        this.electronService.ipcRenderer.on('routeToPage', (sender, arg) => {
          this.navigateTo(arg);
        });
    }

    navigateTo(arg: string): void {
        this.zone.run(() => {
            this.router.navigateByUrl(`/${arg}`);
        });
    }
}

提前谢谢你。

Answer 1

正如文档所说:

A zone provides an execution context that persists across async tasks

导航是一个异步任务，angular 需要检测整个 Electron 的变化来渲染你的新 View ，所以 Angular 区域定义了运行到 angular 执行上下文中的内容，以及运行在外部的内容，在这种情况下是 Electron