mat-tab - щелчок вызывает эффект ряби, но не изменение вкладки

Question

В моем приложении angular-electronic я использую mat-tab-group, в каждой вкладке я загружаю один и тот же экземпляр компонента.

У меня есть два способа создания новых вкладок: - один нажатием кнопки в компоненте, который содержит группу мат-вкладок - второй активируется с помощью сообщения IPC.

Оба способа вызывают одну и ту же функцию, когда я помещаю новый объект в массив, вкладки создаются с помощью *ngFor для этого массива.

Эффект:

В то время как "вторая" вкладка, созданная нажатой кнопкой, ведет себя нормально, вкладка, запущенная через IPC ("третья"), не выполняет:

Эффект пульсации отображается прямо при нажатии на "третий"-таблицы, но событие щелчка на вкладке (selectedTabChange) срабатывает только тогда, когда я щелкаю второй раз где-нибудь в окне. Кроме того, содержимое вкладки (в виде ng-шаблона) изменяется только после второго клика.

Как компонент, который содержит вкладки, так и компонент, который создается в каждой вкладке, используют стратегию push в обнаружении изменений.

Я почти уверен, что это как-то связано с 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();
  }

Answer 1

Вау, это было намного проще, чем я думал:

Оказывается, что из-за подписки на Электронную службу код работал за пределами NgZone и оставался там.

Я узнал, потому что я вставил это в вызываемую функцию: console.log(NgZone.isInAngularZone());

Одна и та же функция возвращала один раз true, один раз false, в зависимости от того, как я ее вызвал.

Решение было действительно простым:

В подписке на электронный сервис я теперь вызываю функцию createTab следующим образом: this.ngZone.run(() => this.createNewTab());