时间戳

首页 > 解决方案 > “导航在 Angular 区域外触发”解释

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

问题描述

我正在使用 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 并在此处和其他地方进行搜索，但我不明白这是做什么的或为什么需要这样做。

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

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

电子 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}`);
        });
    }
}

先感谢您。

标签： angularelectronrouter

解决方案

正如文档所说：

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

导航是一个异步任务，角度需要检测电子的变化来渲染你的新视图，所以角度区域定义了在角度执行上下文中运行的内容，以及在外部运行的内容，在这种情况下是电子

推荐阅读