如何销毁步进垫子中的组件

问题描述

我的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>