Question

我正在使用Angular开发电子应用程序。我创建了一个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的信息并在此处和其他地方进行了搜索，但我不知道这是做什么的，或者为什么我需要这样做

直接调用this.router.navigateByUrl有什么问题？
为什么在app.component.ts中调用该调用时，它为什么告诉我该调用不在Angular区域之外？

电子 main.js

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

角度 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区域之外触发”说明

1 个答案: