Question

我们在Angular 9应用程序中拥有一个大型表单，其中包含+30个选择框，每个框中都有+50个选项。在当前版本中， selects直接在html中实现，下面的<mat-form-field>仅复制粘贴+30次。

问题是mat-optgroup i的启动相对较慢，因此会导致巨大的性能不足 +30个选项将分别启动！

所有mat-select使用相同的mat-optgroup，因此我们正在寻找一种解决方案，其中mat-optgroup一次启动并在所有选择中重复使用？

我们尝试了一种解决方案，其中从mat-optgroup中提取了ng-template，但没有成功。要走的路可能是使用ng-content，但我们尚未成功实现。使用ng-content的工作示例将可以看到很大的帮助，或者非常感谢其他有关性能改进的建议。

谢谢。

<mat-form-field>
    <mat-label>Label</mat-label>
    <mat-select formControlName="account">
        <mat-optgroup *ngFor="let group of groupedAccount" [label]="group.name">
            <mat-option *ngFor="let account of group.accounts" [disabled]="account.disabled" [value]="account">
                {{ account.number }} - {{ account.name }}
            </mat-option>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

最小再现，仅显示加载时间，在真实应用https://stackblitz.com/edit/angular-ivy-eax4xk

中甚至更长

Answer 1

尝试看看“角度材料”选项卡

“角度材料”选项卡将内容组织到单独的视图中，一次只能看到一个视图。

...延迟加载默认情况下，选项卡的内容会急切加载。急于加载的选项卡将激活子组件，但在激活该选项卡之前，不会将它们注入DOM。

希望这会有所帮助

Lazy Loading

角材料垫选择重复使用垫选项

1 个答案: