Angular 有条件地使用或不使用锚标签的图像

Question

我现在在一个组件中出现这种情况：

  <a [routerLink]="[pageUrl] | localize" *ngIf="pageUrl">
    <img />
  </a>
  <ng-container *ngIf="!pageUrl">
    <img />
  </ng-container>

当然，图像标签可以更多。问题是：我不想重复自己。我可以用 ng-template 或类似的东西解决这个问题吗？它是如何工作的？

Answer 1

是的，可以用 ng-template 来完成，如下所示

 <a [routerLink]="[pageUrl] | localize" *ngIf="pageUrl; else elseBlock">
    <img />
  </a>
<ng-template #elseBlock>Content for else block</ng-template>

Angular 有条件地使用或不使用锚标签的图像

Angular image conditionally with or without anchor-tag

anchor

conditional-statements

angular