angular - 有没有办法在每个 mat-step 中延迟加载组件？

Question

我正在尝试实现一个 mat-stepper，它在每个步骤中都有不同的组件。我需要将数据从第一步传递到下一步，所以我基本上使用@ViewChild 和@Input 来做到这一点。但是，我希望每个步骤中的组件仅在控件移动到该步骤时才被初始化，而不是在最开始时。我尝试使用内部组件，就像我们将如何延迟加载 mat-tabs 一样，但它似乎不起作用。有解决方法吗？

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

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

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

这是一个例子：

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

Answer 3

您可以使用ngx-mat-step-lazy-load第三方包

你可以从这里找到ngx-mat-step-lazy-load