如何在 Angular 中实现指令 (ng-template)？

Question

在我的 HTML 文件中，我复制了“elseBlock2”。我如何实现指令 (ng-template) 来处理它？

<div class="col-2">
   <ng-container *ngIf="item.isSuccess; else elseBlock2">
      {{getSimplifiedSize(item.file.size)}}
   </ng-container>
   <ng-container *ngIf="item.progress; else elseBlock2">
      {{item.progress}}%
      <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
   </ng-container>
</div>

Answer 1

可以这样工作吗？

<div class="col-2">
  <ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
    <ng-container *ngIf="item.isSuccess">
      {{getSimplifiedSize(item.file.size)}}
    </ng-container>
    <ng-container *ngIf="item.progress">
      {{item.progress}}%
      <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
    </ng-container>
  </ng-container>
  <ng-template #elseBlock2>
    Your content
  </ng-template>
</div>

更新：

如果你想显示 elseBlock 只有当它不在 progress 和 success[=23= 时] 你可以这样做：

<div class="col-2"> <ng-container *ngIf="item.isSuccess"> {{getSimplifiedSize(item.file.size)}} </ng-container> <ng-container *ngIf="item.progress"> {{item.progress}}% <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar> </ng-container> <ng-container *ngIf="!item.progress && !item.isSuccess"> Your content </ng-container> </div>

Answer 2

你可以使用 if then else 和三元运算符来实现 else-if in Angular

<ng-container
  *ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>

<ng-template #successBlock>
  {{ getSimplifiedSize(item.file.size) }}
</ng-template>

<ng-template #progressBlock>
  {{ item.progress }}%
</ng-template>

<ng-template #elseBlock>
  Error
</ng-template>

在 else 语句中，不传递模板，而是使用三元运算符进行另一个条件检查，并将其他两个模板作为值传递

如何在 Angular 中实现指令 (ng-template)？

How do I implement directive (ng-template) in Angular?

html

angularjs

ng-template

angular