无法更新正面和背面之间IPC通信中的角度分量

Question

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

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

有什么想法我做错了吗？

在main.ts中：

$(document).ready(function() { 
  // ...Vue code here.. 
});

file.service.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);
        });
      });
    });

在test.component.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.html中：

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);
    });
  }
}

Answer 1

在您订阅事件并使用方法import React, { Component } from 'react'; import { connect } from 'react-redux'; class LernenContainer extends Component { constructor(props) { super(props); this.state = { data: [] } } render() { return ( <div className="lernenContainer"> LernenContainer { console.log(this.props.firestoreData), // prints array correctly console.log(this.props.firestoreData.length) // is undefined } </div> ); } } const mapStateToProps = state => { return { firestoreData: state.firestoreData }; }; const mapDispatchToProps = dispatch => { return { // todo Achievements }; }; export default connect(mapStateToProps, mapDispatchToProps) (LernenContainer); 的类中导入NgZone。我没有使用IPC，但是对于后端的推送事件，它确实起作用

run