Javascript 材料扩展面板内容-ng模板？

我有以下代码，是我从这里偷来的：

有一个问题-我很困惑，因为标签内的内容不会显示，但是foo bar baz会显示。那么内部内容的用途是什么？为什么不显示？

在调用它之前不会呈现。试试这个：

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

通过这种方式，您可以构建一次，然后在所有位置重复使用它。

在调用它之前不会渲染。试试这个：

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

通过这种方式，您可以一次性构建，并在所有地方重复使用它