Нет обнаружения угловых изменений при обмене данными с IpcMain

Question

Я создаю приложение, используя Angular / Electron . В компоненте Angular у меня есть метод - handleData() - который определяет объект - просто прямые массивы, строки, числа и т. Д., Без асинхронных вызовов или чего-либо подобного. Свойства этого объекта затем используются для создания и заполнения шаблона с использованием *ngFor и *ngIf.

Во время разработки у меня есть кнопка в компоненте, которая при нажатии вызывает handleData() напрямую, и все работает нормально - данные создаются, шаблон обновляется, чтобы отразить это. Когда все настроено так, я делаю простое изменение, так что сейчас нажатие кнопки отправляет сообщение через IpcRenderer (используя IpcService, как описано в этой статье ) ...

onButtonClick(){
   this.ipc.on('test-response', (e)=>{
      this.handleData();
   });
   this.ipc.send('test-channel');
}

Это поднято в моем main.js, и я отвечаю на него, отправляя сообщение обратно ...

ipcMain.on('test-channel', (e)=>{
   e.sender.send('test-response');
});

В этом случае handleData() по-прежнему вызывается НО , теперь пользовательский интерфейс больше не обновляется. Я должен использовать ChangeDetectorRef и вручную вызывать detectChanges каждый раз, когда я обновляю свойство, связанное с шаблоном, с помощью *ngIf или *ngFor.

Итак, мой вопрос: чем отличается вызов метода в обратном вызове IPC от прямого вызова?

Это синхронизация / асинхронность? Зоны? Объем проблемы?

Мысли с радостью приняты.

Приветствия всем

Answer 1

Я исправил это с помощью NgZone. Как уже упоминалось, я мог бы использовать ChangeDetectorRef.detectChanges, но мне приходилось вызывать его после каждого обновления, не только в моем основном компоненте, но и во всех его потомках, что казалось неправильным.

Я прочитал несколько статей, в которых предполагалось, что это может быть проблема зоны, поэтому мне пришлось наконец попытаться узнать, что же такое зона. Я нашел эту статью и ссылки в ней очень полезными для понимания основ.

Наконец-то я ввел NgZone в свой компонент:

constructor(private zone:NgZone){}

Затем я проверяю, выполняется ли обратный вызов в угловой зоне:

onButtonClicked(){
   this.ipc.on('test-response', (e)=>{
   this.zone.run(()=>{
      this.testFunc()
   });
});
this.ipc.send('test-channel');

Я не собираюсь делать вид, что точно понимаю, почему возникла эта проблема или почему это решается. Я предполагаю, что получение оболочки Electron и IpcMain вовлекает процесс за пределы угловой зоны и не возвращает ответный вызов.

Answer 2

Просто используйте детектор изменений.

constructor(private cdr:ChangeDetectorRef)

onButtonClick(){
   this.ipc.on('test-response', (e)=>{
      this.handleData();
      this.cdr.detectChanges();
   });
   this.ipc.send('test-channel');
}

Обнаружение изменений угловых прогонов при:

1. Взаимодействие с пользователем (щелчок, событие ключа)
2. Изменение внесено в @Входные данные
3. Изменение выдается на @ Выход
4. Изменения, внесенные в переменные общедоступных компонентов

Помните, что все эти изменения должны включать изменение ссылки, а не состояния значения в интернете.

Например

public user:User;

public someMethod(){
   this.user=new User(); // this will trigger change detection run
   this.user.name="Sebastian"; // this will not, 
   this.cdr.detectChanges(); // hey Angular, I made some changes - update view for me
}