角材料嵌套手风琴模板被拿起我的父手风琴

Question

我有一个嵌套在另一个手风琴中的mat-accordion，我想直接呈现父手风琴的内容，但是延迟加载子手风琴。通过将手风琴内容包装在带有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指令。添加一个空的可以满足父程序对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>