我有一个数据集,其中包含一组面板,这些面板包含有关应在mat-tab-group中加载的组件的信息。 mat-tab-group中的选项卡可以关闭。为此,我更改了用于构建选项卡组的数据结构。因此,当我们有一个包含4个面板的数组(在选项卡组中呈现4个选项卡)并删除一个面板时,该数组将只有3个值,并且仅呈现三个选项卡。
问题在于,已删除选项卡中的组件实际上将保持活动状态。我通过在组件的构造函数中添加一个间隔来进行测试。当组件消失时,我希望它确实消失了,但是间隔中的console.log将继续记录日志。
以下是极简复制的堆积如山:https://stackblitz.com/edit/angular-wfkpqq
我进行了一些Google搜索并检查了文档,但找不到关于关闭Mat-tab的信息。有个花花公子告诉某人这应该由用户来实现,但是他们并没有真正为您提供适当执行此操作的工具。
我如何确保孤立的组件被销毁?
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。我将接受唯一的答案,因为它指导了我的错误。
答案 0 :(得分:2)
我想我知道你的问题是什么。您的组件被破坏了,问题在于您没有关闭间隔。我用堆叠闪电弹奏了一下,如果添加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);
看看这个答案: