Question

我正在尝试实现一个垫式步进器，每个步骤中都有不同的组件。我需要将数据从第一个步骤传递到下一个步骤，因此我基本上是使用@ViewChild和@Input来执行此操作。但是，我希望仅在控件移至该步骤时而不是在开始时才初始化每个步骤中的组件。我尝试在内部使用组件，就像我们懒加载mat-tab一样，但是似乎无法正常工作。是否有解决方法？

Answer 1

您可以使用类似的东西

<mat-vertical-stepper #stepper>
   <mat-step #first_step>
      <ng-container *ngIf="stepper.selected == null || stepper.selected == first_step">
      </ng-container>
   </mat-step>
   <mat-step #second_step>
      <ng-container *ngIf="stepper.selected == second_step">
      </ng-container>
   </mat-step>
   <mat-step #third_step>
      <ng-container *ngIf="stepper.selected == third_step">
      </ng-container>
   </mat-step>
</mat-vertical-stepper>

请注意，第一步的条件也需要包括对null的检查。否则，您将收到一个ExpressionChangedAfterItHasBeenCheckedError。

编辑

您也可以这样

<mat-vertical-stepper #stepper>
       <mat-step>
          <ng-container *ngIf="stepper.selected === 0 ">
          </ng-container>
       </mat-step>
<mat-vertical-stepper/>

当然，“ 0”与第一步有关。

Answer 2

作为参考，在 the Angular Material documentation 中描述了一种内置的延迟渲染方式 mat-step。

<块引用>

如果您有一些内容想要推迟到打开特定步骤，您可以将其放入 ng-template 中 matStepContent 属性。

这是一个例子：

<mat-vertical-stepper>
    <mat-step>
        <ng-template matStepLabel>Step 1</ng-template>
        <ng-template matStepContent>
            <p>This content was rendered lazily</p>
            <button mat-button matStepperNext>Next</button>
        </ng-template>
    </mat-step>
<mat-vertical-stepper>

有没有一种方法可以在每个步骤中延迟加载组件？

2 个答案: