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。

希望這會有所幫助

延遲加載