Angular：如何通过ng-template避免图片标签重复实现条件锚点嵌套？

当然可以！用ng-template来解决这种代码重复的场景简直太合适了——这正是Angular模板复用机制的核心用途之一。我给你一步步拆解具体怎么实现：

1. 先把重复的内容封装成模板 #

首先，把你那部分复杂的<img>标签（以及任何关联的内容）抽出来放到一个<ng-template>里，给它指定一个模板引用变量（比如#imageContent），这样后面就能在需要的地方重复调用它：

<ng-template #imageContent>
  <!-- 这里放你实际项目中复杂的img标签，比如带各种绑定、样式的 -->
  <img 
    [src]="productImageUrl" 
    [alt]="productName" 
    class="product-img rounded shadow-sm"
    (click)="onImageClick()"
  />
</ng-template>

2. 在两个分支里复用这个模板 #

接下来，你原来的两种场景（有pageUrl时用<a>包裹，没有时直接显示）都可以通过*ngTemplateOutlet来引用上面的模板，完全不用重复写img的代码：

简洁写法（用ngIf的else语法） #

这种写法最紧凑，只需要一次*ngIf判断：

<!-- 当pageUrl存在时，用带routerLink的a标签包裹模板内容 -->
<a 
  [routerLink]="[pageUrl] | localize" 
  *ngIf="pageUrl; else imageContent"
>
  <ng-container *ngTemplateOutlet="imageContent"></ng-container>
</a>

<!-- 当pageUrl不存在时，直接显示模板内容 -->
<ng-template #imageContent>
  <!-- 你的复杂img代码 -->
</ng-template>

更直观的分支写法 #

如果你觉得else语法不够直观，也可以分开写两个判断，同样复用模板：

<!-- 有pageUrl的情况 -->
<a [routerLink]="[pageUrl] | localize" *ngIf="pageUrl">
  <ng-container *ngTemplateOutlet="imageContent"></ng-container>
</a>

<!-- 没有pageUrl的情况 -->
<ng-container *ngIf="!pageUrl">
  <ng-container *ngTemplateOutlet="imageContent"></ng-container>
</ng-container>

<!-- 定义复用模板 -->
<ng-template #imageContent>
  <!-- 你的复杂img代码 -->
</ng-template>

3. 进阶：给模板传递动态数据（可选） #

如果你的img内容需要根据场景传递不同的参数（比如不同的图片地址、alt文本），还可以通过context给模板传值：

首先修改模板，用let-语法接收上下文变量：

<ng-template #imageContent let-imageProps="props">
  <img 
    [src]="imageProps.src" 
    [alt]="imageProps.alt" 
    class="product-img rounded shadow-sm"
  />
</ng-template>

然后引用模板时传递上下文对象：

<a 
  [routerLink]="[pageUrl] | localize" 
  *ngIf="pageUrl; else noLinkImage"
>
  <ng-container *ngTemplateOutlet="imageContent; context: { props: mainImageProps }"></ng-container>
</a>

<ng-template #noLinkImage>
  <ng-container *ngTemplateOutlet="imageContent; context: { props: mainImageProps }"></ng-container>
</ng-template>

这样即使需要动态切换图片属性，也只需要维护一处模板代码，非常方便。

这种方式不仅解决了代码重复的问题，还让你的模板结构更清晰，后续维护img相关逻辑时只需要修改一处即可，大大降低了维护成本。

内容的提问来源于stack exchange，提问作者Johny Geenens