Представление не обновляется при получении сообщения IPC
Мой компонент правильно получает сообщение (как я мог видеть с помощью отладчика), но его представление не обновляется. Есть ли какие-либо ручные операции в прослушивателе IPC?
Это мой HTML-код компонента:
<div>
{{text}}
</div>
А это TypeScript:
import { Component, OnInit } from '@angular/core';
import { ipcRenderer } from 'electron'
@Component({
selector: 'app-receiver',
templateUrl: './receiver.component.html',
styleUrls: ['./receiver.component.scss']
})
export class ReceiverComponent implements OnInit {
text: string;
constructor() { }
ngOnInit() {
ipcRenderer.on('msg', function (event, arg){
this.text=arg;
})
}
}
Я ожидаю, что новая строка, которую страница получает от процесса Electron, будет отображаться на странице, но этого не происходит.
Ответы 1
Обработка событий IPC выполняется за пределами угловой зоны. Событие не является так называемым «обезьяньим патчем». Вы должны применить изменение внутри вызова ngZone.run. Кроме того, вы используете ключевое слово function, что приводит к изменению контекста this на эту функцию и больше не позволяет получить доступ к классу this. Используйте обозначение стрелки:
constructor(readonly nz: NgZone) { }
ngOnInit() {
ipcRenderer.on('msg', (event, arg) => {
this.nz.run(() => this.text = arg);
});
}
Не забудьте «отменить прослушивание» для msg в ngOnDestroy, иначе вы активируете detectChanges для уничтоженной директивы, а angular это не нравится :)
использование стрелочных функций изменяет область видимости, а не зоны. для запуска в угловой зоне нужно импортировать ngZone а потом run() код и он будет в зоне
@ mast3rd3mon абсолютно прав, не знаю, почему я заставил его использовать changeDetector. Это сработает (я думаю), но это неправильный путь. Я обновил свой ответ, чтобы он работал наверняка. Спасибо за предупреждение
ipcRenderer, скорее всего, работает за пределами угловой зоны, или вы не можете правильно определить область видимости