Angular Material 嵌套手风琴模板被我的父手风琴选中

Question

我有一个 mat-accordion 嵌套在另一个手风琴中，我想直接渲染父手风琴的内容，但延迟加载子手风琴。 Angular Material 通过将手风琴内容包装在使用 matExpansionPanelContent 指令注释的 ng 模板中来提供延迟加载。

我的代码如下所示：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Panel 1
    </mat-expansion-panel-header>

    <div class="panel-content">

      Immediately loaded parent content

      <mat-accordion displayMode="flat">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            Panel 1A
          </mat-expansion-panel-header>

          <ng-template matExpansionPanelContent>
            Lazy-loaded child content
          </ng-template>

        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            Panel 1B
          </mat-expansion-panel-header>

          <ng-template matExpansionPanelContent>
            Lazy-loaded child content
          </ng-template>

        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </mat-expansion-panel>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Panel 2
    </mat-expansion-panel-header>

    <div class="panel-content">
      Immediated loaded parent content
    </div>
  </mat-expansion-panel>
</mat-accordion>

相反，父手风琴和子手风琴拾取并渲染延迟加载的内容，因此它被渲染两次。

有没有办法将延迟加载的内容直接传递给面板，以便只有特定面板呈现内容？还是有更好的方法可以做到这一点？

Answer 1

最初，我使用了一种解决方法，即延迟加载父内容和子内容，但这并不理想，因为延迟加载父内容会导致一些我不想要的行为。

实际上最好在父面板中添加一个空的MatExpansionPanelContent 模板。

为了了解发生了什么，我查看了源代码，发现他们只是使用ContentChild 装饰器来选择模板：

@ContentChild(MatExpansionPanelContent) _lazyContent: MatExpansionPanelContent;

这会选择应用了MatExpansionPanelContent 指令的first 模板，该模板在其范围内遇到。添加一个空的满足父级对ContentChild 的搜索，因此它停止查找并且找不到子模板。

代码如下：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Panel 1
    </mat-expansion-panel-header>

    <!-- Added empty template -->
    <ng-template matExpansionPanelContent></ng-template>

    <!-- Rest of the parent content is eagerly-loaded -->
    <div class="panel-content">
      Immediately loaded parent content

      <mat-accordion displayMode="flat">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            Panel 1A
          </mat-expansion-panel-header>

          <ng-template matExpansionPanelContent>
            Lazy-loaded child content
          </ng-template>

        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </mat-expansion-panel>
</mat-accordion>