Angular中如何根据API返回的media_type条件渲染不同mat-icon图标

你在React中用嵌套三元判断类型渲染图标的逻辑，在Angular中有几种等价且易维护的实现方式：

1. 直接使用三元表达式（和React写法逻辑对齐） #

Angular模板支持直接在属性、内容位置写三元表达式，完全可以平移你原来的写法，不过多条件嵌套可读性一般：

<!-- 注意Angular中绑定svgIcon输入属性用[]，原生aria-hidden属性需要加attr.前缀 -->
<mat-icon 
  [svgIcon]="data.media_type === 'image' ? 'image' : null" 
  [attr.aria-hidden]="data.media_type === 'image' ? 'false' : 'true'"
>
  {{ data.media_type === 'video' ? 'video' : 'album' }}
</mat-icon>

注意：这种写法只适合判断分支极少的场景，分支多了模板会变得非常难读。

2. 使用ngSwitch指令（推荐日常使用） #

对于固定枚举值的多分支判断，Angular内置的ngSwitch指令可读性远高于嵌套三元，后续新增类型修改也方便：

<!-- ng-container是逻辑容器，渲染时不会生成额外DOM节点 -->
<ng-container [ngSwitch]="data.media_type">
  <mat-icon *ngSwitchCase="'image'" [svgIcon]="'image'" [attr.aria-hidden]="'false'"></mat-icon>
  <mat-icon *ngSwitchCase="'video'">video</mat-icon>
  <!-- 剩余默认场景统一走default分支，对应你原来逻辑里的album类型 -->
  <mat-icon *ngSwitchDefault>album</mat-icon>
</ng-container>

3. 预定义配置映射（适合后续频繁扩展的场景） #

如果后续可能新增更多media_type、或者图标配置需要动态调整，可以把判断逻辑挪到组件TS文件中，模板只做绑定，维护成本更低：
首先在组件类中定义映射配置：

// 定义媒体类型枚举，避免拼写错误
type MediaType = 'image' | 'video' | 'album';

@Component({
  // 组件元配置省略
})
export class YourComponent {
  // 接口返回的数据
  data: { media_type: MediaType; [key: string]: any };

  // 不同媒体类型对应的图标配置
  private readonly iconConfigMap: Record<MediaType, {
    svgIcon?: string;
    content?: string;
    ariaHidden: boolean;
  }> = {
    image: { svgIcon: 'image', ariaHidden: false },
    video: { content: 'video', ariaHidden: true },
    album: { content: 'album', ariaHidden: true }
  };

  // 模板中直接取当前类型对应的配置即可
  get currentIconConfig() {
    return this.iconConfigMap[this.data.media_type] || this.iconConfigMap.album;
  }
}

模板中不需要写任何判断逻辑，直接绑定配置：

<mat-icon 
  [svgIcon]="currentIconConfig.svgIcon"
  [attr.aria-hidden]="currentIconConfig.ariaHidden"
>
  {{ currentIconConfig.content }}
</mat-icon>

后续新增媒体类型时，只需要在iconConfigMap中新增一项配置即可，不需要修改模板代码。

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