angular - 无法更新正面和背面之间IPC通信中的 Angular 分量

Question

我有一个Electron(6)/Angular(8)应用程序。
在正面( Angular )，我通过IPCRenderer向背面发送一条消息。
在背面，IPCMain接收消息并执行所需的操作，例如，获取文件列表。
背面一次将文件一次发送到正面(同样是IPC)。
前端接收消息，因为我在收到每个文件时都会“console.log”。

但是，当我用文件填充数组时，它不会显示在页面上的“直到我单击”组件中。

知道我做错了什么吗？

在main.ts中:

ipcMain.on('get-files', (event, data) => {
      const path = data;
      fs.readdir(path, (err, files) => {
        files.forEach(file => {
          this.log.info(file);
          event.reply('new-file', file);
        });
      });
    });

file.service.ts:

import { Injectable } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FilesService {
  public _file: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(private els: ElectronService) {}

  setFile(value) {
    if (value) {
      this._file.next(value);
    }
  }

  listfiles(path: string): Observable<string[]> {
    const result = new Observable<string[]>(observer => {
      const files = this.els.ipcRenderer.sendSync('listfiles', { path });
      observer.next(files);
    });
    return result;
  }

  getFiles(path: string) {
    this.els.ipcRenderer.send('get-files', path);
  }
}

在test.component.ts中:

import { Component, OnInit } from '@angular/core';
import { ElectronService } from 'ngx-electron';

import { ProjectsService } from '../../services/projects.service';
import { FilesService } from './../../services/files.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  constructor(private fileService: FilesService, private projectService: ProjectsService, private els: ElectronService) {}

  files = [];
  sPath = 'c:\\';

  ngOnInit() {
    this.fileService._file.subscribe(file => {
      if (file) {
        this.files.push(file);
      }
    });

    this.els.ipcRenderer.on('new-file', (event, file) => {
      console.log(file);
      this.fileService.setFile(file);
    });
  }

  sendMsg() {
    console.log('sendMsg');
    this.files = [];
    /* this.fileService.listfiles(this.sPath).subscribe(result => {
      this.files = result;
    }); */
    this.fileService.getFiles(this.sPath);
  }

  newProject() {
    console.log('newProject');
    this.projectService.createProject('test.pj4').subscribe(result => {
      console.log(result);
    });
  }
}

在test.component.html中:

<div id="test">
  <div class="divbtn">
    <button class="xx" mat-raised-button color="primary" (click)="sendMsg()">Test</button>
  </div>
  <div class="divbtn">
    <button class="xx" mat-raised-button color="primary" (click)="newProject()">New Project</button>
  </div>

  <div *ngIf="files.length > 0">
    <p *ngFor="let file of files">{{file}}</p>
  </div>
</div>

Answer 1

在您订阅事件并使用NgZone方法的类中导入run。我没有使用IPC，但是对于后端的推送事件，它确实有效

this.els.ipcRenderer.on('new-file', (event, file) => {
  console.log(file);
  this.ngZone.run(() => this.fileService.setFile(file));
});