如何销毁mat-stepper中的组件
如何销毁mat-stepper中的组件
提问于 2020-09-18 19:28:32
我的mat-stepper有一些问题，每一步都是一个新的组件。
我的问题是，当在我的mat-stepper中来回移动时，每个步骤(组件)都不会触发ngOnDestroy()。
我的stepper代码如下: HTML：
<mat-horizontal-stepper [selectedIndex]="selectedIndex" linear labelPosition="bottom" #stepper fxLayoutAlign="center center" fxLayout="column">
<mat-step [stepControl]="step1">
<ng-template matStepLabel>{{ stepCaptions[0] }}</ng-template>
<app-step1></app-step1>
</mat-step>
<mat-step [stepControl]="step2">
<ng-template matStepLabel>{{ stepCaptions[1] }}</ng-template>
<app-step2></app-step2>
</mat-step>
<mat-step [stepControl]="step3">
<ng-template matStepLabel>{{ stepCaptions[2] }}</ng-template>
<app-step3></app-step3>
</mat-step>
<mat-step [stepControl]="step4">
<ng-template matStepLabel>{{ stepCaptions[3] }}</ng-template>
<app-step4></app-step4>
</mat-step>
<mat-step [stepControl]="step5">
<ng-template matStepLabel>{{ stepCaptions[4] }}</ng-template>
<app-step5></app-step5>
</mat-step>
</mat-horizontal-stepper>打字：
@ViewChild('stepper', { static: false }) stepper;我是不是遗漏了什么？
回答 1
Stack Overflow用户
发布于 2020-09-18 20:00:26
您可以将*ngIf与组件上的selectedIndex一起使用，以在应用程序步骤组件上强制使用ngOnDestroy()。
<mat-horizontal-stepper [selectedIndex]="selectedIndex" linear labelPosition="bottom" #stepper fxLayoutAlign="center center" fxLayout="column">
<mat-step [stepControl]="step1">
<ng-template matStepLabel>{{ stepCaptions[0] }}</ng-template>
<app-step1 *ngIf="selectedIndex === 0"></app-step1>
</mat-step>
...
</mat-horizontal-stepper>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63954900
复制相关文章
相似问题
腾讯云开发者
