Question

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

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

两种方法都调用相同的函数，即我将一个新对象推入一个数组，这些选项卡是通过此数组上的* ngFor创建的。

效果：

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

波纹效果显示在“第三”选项卡上的单击上，但是仅当我在窗口中的某处第二次单击时才触发选项卡上的单击事件（selectedTabChange）。另外，只有在第二次单击后，选项卡的内容（包装在ng模板中）才会更改。

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

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

此处的Gif动画：

switching Tabs

代码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();
  }

Answer 1

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

事实证明，由于订阅了Electron Service，该代码在NgZone外部运行，并停留在该区域。

我发现是因为我将其插入了被调用的函数中： console.log（NgZone.isInAngularZone（））;

根据我的调用方式，同一函数返回一次true，一次false。

解决方案非常简单：

在电子服务的订阅中，我现在这样调用createTab函数： this.ngZone.run（（）=> this.createNewTab（））;

垫选项卡-单击可触发波纹效果，但不会更改选项卡

1 个答案: