1

在我的 angular-electron 应用程序中，我使用 mat-tab-group，在每个选项卡中我加载相同的组件实例。

我有两种创建新标签的方法： - 一种是通过单击包含 mat-tab-group 的组件中的按钮 - 第二种是通过 IPC 消息触发的。

两种方式都调用相同的函数，其中我将一个新对象推送到一个数组，选项卡是通过 *ngFor 在这个数组上创建的。

效果：

虽然单击按钮创建的“第二个”选项卡行为正常，但通过 IPC（“第三个”）触发的选项卡不会：

单击“第三个”选项卡时会显示涟漪效果，但选项卡上的单击事件（selectedTabChange）仅在我第二次单击窗口中的某个位置时才会触发。此外，选项卡的内容（包装在 ng-template 中）仅在第二次单击后才会更改。

保存选项卡的组件以及在每个选项卡中实例化的组件都在更改检测中使用推送策略。

我很确定这与 ngZones 有关，但我不确定如何解决这个问题。谢谢你的帮助！

动画 Gif 在这里：

切换标签

代码 HTML：

<mat-icon  (click)="MakeTabActive()">build</mat-icon>

<mat-tab-group mat-align-tabs="start" [selectedIndex]="selectedTab" (selectedTabChange)="RegisterTabChange($event)">
                <mat-tab *ngFor="let item of openWfTabs">
                  <ng-template mat-tab-label>
                      {{item.title}}
                    <mat-icon class="example-tab-icon" (click)="removeTabHandler(item.uid)">close</mat-icon>
                  </ng-template>
                  {{item.uid}}
                  <app-wf-tabcontent [wfContentElementUID]=item.uid>
                  </app-wf-tabcontent>
                </mat-tab>
              </mat-tab-group>

代码 TS：

this._electronService.ipcRenderer.on('to-all', (event, arg) => {

  this.MakeTabActive();

});


MakeTabActive(newTab?:any) {
 if (!newTab) {
  newTab = new WfTab();
 }

 if (!this.openWfTabs.includes(newTab)) {
      this.openWfDocumentElements.push(newTab);
 }

    for (let i:number = 0; i<this.openWfTabs.length;i++) {
      if (this.openWfTabs[i].uid == newTab.uid) {
        this.selectedTab = i;
      }
    }
    this.ref.detectChanges();
  }
4

1 回答 1

1

哇，这比我想象的要容易得多：

事实证明，由于订阅了 Electron 服务，代码在 NgZone 之外运行并停留在那里。

我发现是因为我在被调用函数中插入了这个：console.log(NgZone.isInAngularZone());

同一个函数一次返回真，一次返回假，这取决于我如何调用它。

解决方案非常简单：

在订阅电子服务时，我现在这样调用 createTab 函数： this.ngZone.run(() => this.createNewTab());

于 2019-02-04T20:42:26.567 回答