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

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

0 голосов
/ 03 февраля 2019

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

У меня есть два способа создания новых вкладок: - один, нажав кнопкув компоненте, который содержит группу 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();
  }

1 Ответ

0 голосов
/ 04 февраля 2019

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

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

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

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

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

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

...