Компоненты не уничтожаются после закрытия вкладки mat при построении группы вкладок mat из массива - PullRequest
Новая
       27

Компоненты не уничтожаются после закрытия вкладки mat при построении группы вкладок mat из массива

0 голосов
/ 17 сентября 2018

У меня есть набор данных, который имеет массив панелей, содержащих информацию о компоненте, который должен быть загружен в mat-tab-group.Вкладки в mat-tab-group можно закрыть.Для этого я изменяю структуру данных, которую мы используем для создания группы вкладок.Поэтому, когда у нас есть массив из 4 панелей (которые отображают 4 вкладки в группе вкладок), и мы удаляем панель, массив будет иметь только 3 значения и будут отображаться только три вкладки.

Проблема заключается в том, что компоненты на удаленной вкладке фактически останутся в живых.Я проверил это, добавив интервал в конструктор моего компонента.Когда компонент исчезнет, ​​я ожидал, что он действительно исчезнет, ​​но console.log в этом интервале будет продолжать регистрировать.

Вот стэк-блиц минимального воспроизведения: https://stackblitz.com/edit/angular-wfkpqq

Я сделал несколько поисков в Google и проверил документы, но не могу найти ничего о закрытии вкладок.Был один чувак, который говорил кому-то, что это должно быть реализовано пользователем, но на самом деле они не дают вам инструментов, чтобы сделать это правильно.

Как я могу убедиться, что мои потерянные компоненты уничтожены? 

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

@Component({
  selector: 'app-dock',
  templateUrl: './dock.component.html',
  styleUrls: ['./dock.component.css']
})
export class DockComponent {

  public dock: any;

  constructor() {
    this.dock = {
      panels: [
        {
          name: 'panel1'
        },
        {
          name: 'panel2'
        },
        {
          name: 'panel3'
        },
        {
          name: 'panel4'
        }
      ]
    }
  }

  public onClose(panel): void {
    var index = this.dock.panels.indexOf(panel);
    if (index > -1) {
      this.dock.panels.splice(index, 1);
    }
  }
}
<mat-tab-group #tabs>
	<ng-container *ngFor="let panel of dock.panels">
		<mat-tab>
			<ng-template mat-tab-label>
				<div>
					<span class="tab-title">{{panel.name}}</span>
					<span style="flex: 1 1 auto;"></span>
					<div class="tab-options">
						<button mat-icon-button (click)="onClose(panel)">
              <mat-icon>close</mat-icon>
            </button>
					</div>
				</div>
			</ng-template>

			<!-- ng-template with matTabContent makes the tabs lazy load -->
			<ng-template matTabContent>
				<app-annoying [name]="panel.name"></app-annoying>
			</ng-template>
		</mat-tab>
	</ng-container>
</mat-tab-group>

[править] Проблема была в другом.Я отключил динамически вставленный компонент, чтобы я мог перемещать компоненты.Я также сделал это при закрытии компонента, чтобы панель была отсоединена, чтобы OnDestroy никогда не вызывался.Я приму единственный ответ, так как он привел меня к моей ошибке.

1 Ответ

0 голосов
/ 17 сентября 2018

Я думаю, я знаю, в чем твоя проблема. Ваши компоненты уничтожаются, проблема в том, что вы не закрываете интервал. Я играл arround с вашим stackblitz, и если вы добавите ngOnDestroy (и реализуете OnDestroy) и закроете интервал, вы увидите, что все работает как положено

измени свой annoying.component.ts: 

    import { Component, OnInit, Input, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-annoying',
  templateUrl: './annoying.component.html',
  styleUrls: ['./annoying.component.css']
})

export class AnnoyingComponent implements OnDestroy {
  @Input() public name: string;
  _interval:any;
  constructor() {
    this._interval = setInterval(() => {
      console.log(this.name + ' still lives');
    }, 1000);
   }

   ngOnDestroy(){
     clearInterval(this._interval);
     console.log(this.name + "is being destroyed");
   }
}

и вы увидите, что журнал "is being destroyed" отображается, а другие журналы останавливаются при закрытии вкладки.

Проблемы были с отсутствием 

clearInterval(this._interval);

Взгляните на этот ответ:

https://stackoverflow.com/a/42395773/7041393

...