'导航在Angular区域之外触发'解释

Question

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

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

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

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

2. 为什么在app.component.ts中调用它时,它会告诉我调用是在Angular区域之外？

电子 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

正如文档所说：

区域提供跨异步任务持续存在的执行上下文

导航是一个异步任务，Angular 需要检测 Electron 上的变化来渲染新视图，因此 Angular 区域定义了运行在 Angular 执行上下文中的内容以及在外部运行的内容，在本例中为 Electron