javascript - Angular + Electron基本应用程序不会刷新页面的一部分

Question

我正在使用Angular 9 + Electron应用程序，该应用程序从文件系统读取文件名(而不是内容)，并将其以树状结构显示在面板上。我的Angular部分在浏览器上工作得很好，但是当我尝试在Electron上下文中运行它时，面板没有显示树形结构。使其显示的唯一方法是调整Electron-app窗口的大小或强制事件(单击按钮)。我的问题是，一旦数据到达，如何使它呈现树状结构？
当我在Angular中为Electron服务添加console.log时，来自Electron进程的数据会显示在控制台上，然后Angular获取并处理数据。但是，当必须将数据从app.component.ts文件传输到其子组件时，控制台将停止打印。控制台停止并显示以下警告:
“安全警告:在未启用worldSafeExecuteJavaScript的情况下调用了webFrame.executeJavaScript。这被认为是不安全的。默认情况下，Electron 12中将启用worldSafeExecuteJavaScript。”
并停止打印其他任何内容。
这是我正在使用的代码:
用index.html

...
  <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
...

在app.ts( Electron 主文件)中:

...
function createWindow() {
  
  win = new BrowserWindow(
    { 
      "width": 800, "height": 600,
      "title": "My Life Notes...",
      "icon": path.join(__dirname,`./favicon.ico`),
      webPreferences: {
        "nodeIntegration": true,
        "worldSafeExecuteJavaScript": true
      } 
    }
  );

  win.loadURL(
    url.format({
      "pathname": path.join(__dirname, `./index.html`),
      "protocol": "file:",
      "slashes": true
    })
  );

  win.webContents.openDevTools();

  win.on("closed", () => {
    win = null;
  });
}
...

在app.component.ts中:

...
NOTES_DATA: NotesNodeImp[]=[];

  constructor(private electron_service: ElectronServiceFile,
              private select_service: SelectedNodeService){
    this.electron_service.loadFiles();
    
  }
...
  ngOnInit(){
    this.electron_service.notes.subscribe( notes =>{
      console.log("app.component notes ", notes);
      notes.forEach( note => {
        let name_parts = note.split('-'); 
        let notesObj =new NotesNodeImp(Number.parseInt(name_parts[0]));
        notesObj.name = note;
        notesObj.label = name_parts[1];
        this.NOTES_DATA.push(notesObj);
      });
      this.NOTES_DATA = Object.assign([], this.NOTES_DATA);
    })
...

在app.component.html中

<div class="app-nav">
  <app-navigation [data_saved]="NOTES_DATA"></app-navigation>
</div>

在electronic.service.ts中:

...  
constructor() {
    if ((<any>window).require) {
      try {
        this.ipc = (<any>window).require('electron').ipcRenderer;
      } catch (e) {
        throw e;
      }
    } else {
      console.warn('App not running inside Electron!');
    }

    this.ipc.on('getNotesResponse', (event, notes) => {
      this.notes.next(notes);
      console.log("available notes ", notes);
    });
    
  }

  loadFiles(){
    console.log('load files: ');
    this.ipc.send('loadNotes');
  }
...

在navigation.component.ts中(子级)

  ...
  data: NotesNodeImp[]=[];

  @Input('data_saved') 
  set data_saved (d: NotesNodeImp[]){
    console.log("data1 " , d)
    this.data = d;
  }
  ...

这是控制台:
The console
该图像显示首先调用loadFiles方法，然后app.component.ts向其子级(navigation.component.ts)发送一个空数组。但是，当数据确实从Electron ipcMain进程到达时，app.component.ts会接收到该数据并对其进行处理，并且看起来好像没有将其发送到其子组件。

Answer 1

问题在于，当数据到达组件时，浏览器引擎未发送更改事件。 Angular有几种方法可以解决这个问题。我选择了
this.zone.run(()=> this.NOTES_DATA);
将数据发送到哪些组件需要了解。有关如何使用区域的说明:https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html