材质扩展面板内容 - ng-template？答案

【问题标题】：Material expansion panel content - ng-template?材质扩展面板内容 - ng-template？
【发布时间】：2018-07-11 01:51:31
【问题描述】：

我有以下代码，我从这里偷来的： https://github.com/angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html

  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

    <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
      <mat-panel-description>Click here to change view format.</mat-panel-description>
      <mat-panel-title>View Controls</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      This is the content text that makes sense here.
      <mat-checkbox>Trigger a ripple</mat-checkbox>
    </ng-template>

    foo bar baz

    <mat-action-row>
      <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    </mat-action-row>
  </mat-expansion-panel>

一个问题 - 我很困惑，因为 <ng-template> 标记内的内容不显示，但“foo bar baz”确实显示。那么<ng-template>里面的内容是什么目的，为什么不显示呢？

【问题讨论】：

标签： javascript html angular dom angular-material2

【解决方案1】：

<ng-template> 在您调用它之前不会渲染。试试这个：

<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-description>Click here to change view format.</mat-panel-description>
    <mat-panel-title>View Controls</mat-panel-title>
  </mat-expansion-panel-header>

  <ng-container *ngTemplateOutlet="matExpansionPanelContent"></ng-container>

  foo bar baz

  <mat-action-row>
    <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
  </mat-action-row>
</mat-expansion-panel>

<ng-template #matExpansionPanelContent>                <-- Note the #hashtag
  This is the content text that makes sense here.
  <mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>

这样您可以一次构建<ng-template>，然后在所有地方重复使用它。

【讨论】：