javascript - mat-expansion-panel 惰性渲染坏了吗？

Question

参见 this Stackblitz .

Angular 材mat-expansion-panel允许 lazy rendering ,

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

在隐藏组件内渲染时，例如，一个关闭的 mat-sidenav , mat-expansion-panel呈现不正确(Stackblitz example):

这在很多方面都是一团糟，尤其是因为我将 mat-expansion-panel 定义为折叠 (expanded="false"):

        <mat-expansion-panel expanded="false">

            <mat-expansion-panel-header>
                <mat-panel-title>
                    <span>First</span>
                </mat-panel-title>
            </mat-expansion-panel-header>

            <ng-template matExpansionPanelContent>
                <!-- Deferred initialization until the panel is open. -->
                <span>You shouldn't see me yet!</span></ng-template>

            <mat-action-row>
                <button mat-button>Click me</button>
            </mat-action-row>

        </mat-expansion-panel>

单击扩展面板的标题会扩展面板(正如它应该的那样)并正确呈现内容:

有趣的是，折叠面板会显示面板最初应该如何呈现:

我的 Stackblitz 示例和这个问题中的屏幕截图都显示了 mat-accordion 中的两个扩展面板:

<mat-tab-group>
    <mat-tab label="Empty">
        <p>This is an empty tab</p>
    </mat-tab>
    <mat-tab label="Accordion">
        <div class="mat-typography">
            <mat-accordion>
                <mat-expansion-panel expanded="true">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <span>First</span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <ng-template matExpansionPanelContent>
                        <!-- Deferred initialization until the panel is open. -->
                        <span>You shouldn't see me yet!</span></ng-template>
                    <mat-action-row>
                        <button mat-button>Click me</button>
                    </mat-action-row>
                </mat-expansion-panel>
                <mat-expansion-panel expanded="false">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <span>Second</span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <ng-template matExpansionPanelContent>
                        <!-- Deferred initialization until the panel is open. -->
                        <span>Shouldn't see me either!</span></ng-template>
                    <mat-action-row>
                        <button mat-button>Click me</button>
                    </mat-action-row>
                </mat-expansion-panel>
            </mat-accordion>
        </div>
    </mat-tab>
</mat-tab-group>

CSS 只是为调试添加了一些颜色:

mat-expansion-panel {
  background-color: grey;
}

mat-expansion-panel:first-child mat-expansion-panel-header {
  background-color:red;
}
mat-expansion-panel:last-child  mat-expansion-panel-header {
  background-color:blue;
}

mat-expansion-panel button {
  background-color: yellow;
}

mat-sidenav 尽可能简单:

<mat-sidenav-container>
    <mat-sidenav #snav class="mat-elevation-z8">
        <app-side-menu></app-side-menu>
    </mat-sidenav>
    <mat-sidenav-content>
        <div>
            <button mat-icon-button (click)="snav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

---

更新

GitHub 上对此进行了长时间的讨论，issues/5269 .虽然问题仍然悬而未决，但它是 being reported该问题已在 angular/material v7 中修复.

Answer 1

问题全在于 *ngIf。第一次它无法使它成为现实。这就是为什么我使用 setTimeout() 将其设置为真。

如果您仍有问题，请告诉我。我会尽力提供帮助。

工作链接

https://stackblitz.com/edit/deferred-expansion-panel-broken-b2vurz?file=app%2Fside-menu%2Fside-menu.component.ts