如何在 Angular 按钮中条件性显示文本内容（不隐藏按钮或图标）

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

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

直接在文本插值 {{t('commonActions.cancel')

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

✅ 正确写法如下：

  cancel
  {{ t('commonActions.cancel') }}

? 注意事项：

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

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