代码之家 › 专栏 › 技术社区 › DoubleA

Angular Material嵌套手风琴模板被我的父手风琴拾取

angular-material angular

DoubleA · 技术社区 · 4 年前

我有一个 mat-accordion 嵌套在另一个手风琴中,我想直接渲染父手风琴的内容,但延迟加载子手风琴。通过将手风琴内容包装在带有注释的ng模板中,为延迟加载提供角材料 matExpansionPanelContent 指令。

我的代码看起来像这样:

<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>

取而代之的是,母手风琴和子手风琴拾取并渲染延迟加载的内容,因此它会被渲染两次。

是否有方法将延迟加载的内容直接传递给面板,以便只有该特定面板呈现内容?或者我能做这件事的更好方法?

1 回复 | 直到 4 年前

DoubleA 4 年前

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

事实上,最好添加一个空 MatExpansionPanelContent 模板到父面板。

为了理解发生了什么,我查看了源代码,发现它们只是使用了 ContentChild decorator来选择模板:

@ContentChild(MatExpansionPanelContent) _lazyContent: MatExpansionPanelContent;

这将选择第一模板与 MatExpansion面板内容 该指令在其范围内适用。添加一个空的满足了家长对 Content儿童 因此,它停止查找,找不到子模板。

以下是代码:

<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>