ng-content Angular 中的 ng-template

Question

我正在嘗試使用模板，該模板將作為組件選擇器 HTML 文件中的 ng-content 傳遞。

<day-summary
  [data]="summary"
  *ngIf="(events.length)>=5;then busy;else notSoBusy"
  >You have <b>{{events.length}}</b> tasks to complete.</day-summary
>
<ng-template #busy>
  You seems busy today. You have <b>{{events.length}}</b> tasks to complete.
</ng-template>
<ng-template #notSoBusy>
  It seems like you have lot of free time. You have
  <b>{{events.length}}</b> tasks to complete.
</ng-template>

我想將其顯示為忙或不忙。 它正忙或不忙，但“day-summary”component.html 模板不起作用。 我該如何讓它工作？

Answer 1

考慮使用ng-contiainer ，如下所示：

<day-summary [data]="summary">
  <ng-container *ngIf="events.length >= 5; then busy; else notSoBusy"></ng-container>
</day-summary>

<ng-template #busy>
  You seems busy today. You have <b>{{events.length}}</b> tasks to complete.
</ng-template>
<ng-template #notSoBusy>
  It seems like you have lot of free time. You have <b>{{events.length}}</b> tasks to complete.
</ng-template>

Answer 2

我想你想這樣做：

<day-summary [data]=summary>
      You have <b>{{events.length}}</b> tasks to complete.
</day-summary>
<ng-container *ngIf="events.length >= 5">
      You seems busy today. You have <b>{{events.length}}</b> tasks to complete.
</ng-container>
<ng-container *ngIf="events.length < 5">
      It seems like you have lot of free time. You have <b>{{events.length}}</b> 
      tasks to complete.
</ng-container>
...

將兩個容器放在您想要有條件地顯示它的位置。 除了 ng-container 之外，您還可以使用任何 html 元素來適應您的布局。