Angular 2的双向绑定不适用于电子app的初始加载

发布时间：2020-12-17 17:02:41 所属栏目：安全来源：网络整理

导读：我有以下文件： topnav.component.ts import { Component } from '@angular/core';import { EnvironmentService } from '../services/ipc/environment.service';const { ipcRenderer } = electron;@Component({ selector: 'app-topnav',templateUrl: './topn

我有以下文件：

topnav.component.ts

import { Component } from '@angular/core';
import { EnvironmentService } from '../services/ipc/environment.service';

const { ipcRenderer } = electron;

@Component({
  selector: 'app-topnav',templateUrl: './topnav.component.html',styleUrls: ['./topnav.component.scss']
})
export class TopnavComponent {
  version: string = null;

  constructor(private environmentService: EnvironmentService) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply',(event,arg) => {
      console.log(arg);
      this.version = arg;
    });
  }
}

topnav.component.html

...
    <div *ngIf="version">{{version}}</div>
...

在代码中,我正在检索有关我正在运行的环境的版本信息,并更新版本属性并希望它在我的视图中更新.调用getVersionInfo()是异步的,并在电子中使用ipcMain和ipcRenderer通信结构.我能够验证这些是否按预期工作.角度和电子都没有误差.

我已经验证了该版本确实在arg param中返回并按预期登录到控制台;但是,在我浏览我的应用程序之前,它不会显示在视图中.这让我相信它与Angular 2中的组件生命周期和变化检测有关.但是,我对Angular 2和Electron都是一个新手.

关于可能发生的事情以及如何解决问题的任何指示或想法？

解决方法

没用过电子..但试试 ngZone.

import { Component,NgZone } from '@angular/core';

在你的构造函数中,

constructor(private environmentService: EnvironmentService,private _ngzone:NgZone) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply',arg) => {
      console.log(arg);
      this._ngzone.run(()=>{
         this.version = arg;
      });
    });
  }

电子可能会更新“区域”之外的值,而角度可能无法检测到它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!