javascript - 从 Electron Container IPC Channel 接收数据时，变更检测会间歇性工作

Question

我有一个应用程序正在监听来自 IPC 渲染器 channel 的​​传入数据。这是我的设置:

将数据发送到 Angular 应用程序(mainWindow)的容器:

mainWindow.loadURL('http://www.myangularapp.com') //where the angular app lives (example url).
mainWindow.webContents.on('did-finish-load', () => {
      const data = { name: "John Doe", address: "123 Main St", city: "NY"}
      mainWindow.webContents.send('data-from-container', data)
        }
    })

Angular 应用:

constructor(
    private store: Store<fromStore.AppState>,
    private cd: ChangeDetectorRef,
    private zone: NgZone,
  ) {}

  ngOnInit() {
this.isLoading = true;
    if (this.electronService.ipcRenderer) {
      this.electronService.ipcRenderer.on('data-from-container', (event, data) => {
        this.zone.run(() => {
          if(data){
            setTimeout(() => {
              console.log(data) // verified data is always received
              this.formData = data; // property that form uses to populate data in the dom
              this.prepopulateForm(data) // method that places incoming data in ngrx store
            }, 1000)
          }
        })
      })
    }

    this.store.select('containerData').subscribe(data => {
        setTimeout(()=> {
          console.log(data) // data is always being set in ngrx
          this.isLoading = false
        }, 5000);
    })

  }

每次 IPC channel 发出“data-from-container”事件时，数据总是从我的 OnInit 调用中收到，但数据并不总是在我的表单中设置!我注意到的模式通常是，当 Angular 应用程序首次在容器内启动时，数据不会预填充表单，在初始启动后，每次后续应用程序启动时，数据都会出现。

我已经尝试使用 ngZone、setTimeout 和 detectChange 方法来触发更改检测，以便 Angular 应用程序可以检测到新设置的 formData，但它并没有始终如一地预填充表单。有关如何解决此问题的任何建议？

Answer 1

我对 Electron 有非常基本的了解，所以我会尝试向您展示这个想法。对我来说，你的问题来自 View 的初始化。您不会丢失事件，因为您可以在控制台中看到它们，但在 View 中看不到，这加强了我的猜测。

如您的代码所示，您只发送一个事件(我想这只是为了测试理由)，我们希望在呈现 View 时显示它。

在您的组件中添加一个主题，通知我们 View 已初始化，例如:

import { Subject, combineLatest, fromEvent } from 'rxjs';

viewInitialized$ = new Subject();

...

ngAfterViewInit() {
 this.viewInitialized$.next();
}

...

现在我们可以等待两次发射，一次来自 ipcRenderer，另一次来自 viewInitialized$，使用 combineLatest 运算符。

在此之前，我们必须将 ipcRenderer 转换为 Observable。从这个SO响应我们可以做 fromEvent(ipcRenderer,'data-from-container')。如果它不起作用，我们可以使用另一个主题，每次我们在 ipcRenderer.on() 中收到一些东西时都会发出事件，第二种解决方案需要 ngZone。

ngOnInit() {
...

const containerData$ = fromEvent(this.electronService.ipcRenderer, 'data-from-container');
this.subscription = combineLatest(containerData$, this.viewInitialized$).subscribe(combined => {
  const data = combined[0];
  this.formData = data;
  this.prepopulateForm(data) 
})

...
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

希望这对您有所帮助。