在 angular 中，可通过 `` 配合 `*ngif` 实现仅对按钮内文本做条件渲染，保持按钮结构和图标始终可见。

当你需要在不同设备（如 PC 与移动端）下差异化展示按钮内容——例如始终显示图标和按钮容器，但仅在桌面端显示文字标签（如“取消”），而移动端只保留图标——关键在于精准控制渲染范围，避免误将整个 或 一并隐藏。

直接在文本插值 {{t('commonActions.cancel')}} 外层包裹 *ngIf 是无效的（Angular 不允许对纯文本节点单独加结构指令）。此时， 是最佳解决方案：它是一个逻辑容器，不生成实际 DOM 元素，仅用于承载结构指令（如 *ngIf、*ngFor），完美实现“仅条件性插入文本”的需求。

✅ 正确写法如下：

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

<button class="mx-2" mat-button type="button" (click)="close()" name="buttonClose">
  <mat-icon>cancel</mat-icon>
  <ng-container *ngIf="!isMobile()">{{ t('commonActions.cancel') }}</ng-container>
</button>

? 注意事项：

• *ngIf="!isMobile()" 确保仅在非移动端（即桌面端）渲染文本；
• 不影响布局、样式或可访问性（无障碍阅读器仍能正常识别按钮整体语义）；
• 切勿使用 替代——虽然可行，但会引入无意义的 DOM 节点，增加冗余； 更语义清晰、性能更优；
• 确保 isMobile() 方法已在组件类中正确定义并返回布尔值（例如基于 BreakpointObserver 或 window.innerWidth 判断）。

? 小结：当需在保留父元素结构的前提下对局部内容做条件渲染时， 是 Angular 提供的轻量、标准且推荐的工具。它让模板逻辑更清晰，也更符合响应式 UI 的开发实践。