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

Question

我们的 Angular 9 应用程序中有一个大表格，有 +30 个 select 框，每个框有 +50 个选项。 在当前版本中，选择只是直接在 html 中实现，其中以下<mat-form-field>只是复制粘贴 +30 次。

问题是mat-optgroup的启动相对较慢，因此引入了巨大的性能不足 +30 选择单独启动！

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

我们尝试了一种解决方案，其中mat-optgroup从ng-template中获取但没有成功。 到 go 的一种方法可能是使用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

试试看 Angular 材质标签

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

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

希望这会有所帮助

延迟加载