如何解决如何销毁步进垫子中的组件
我的mat-stepper
遇到了一些问题,其中每个步骤都是一个新组件。
我的问题是,在我的ngOnDestroy()
中来回移动时,没有在每个步骤(组件)上触发mat-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;
我想念什么吗?
解决方法
您可以将*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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。