在 angular 中，可通过 `
当你需要在不同设备（如 PC 与移动端）下差异化展示按钮内容——例如始终显示图标和按钮容器，但仅在桌面端显示文字标签（如“取消”），而移动端只保留图标——关键在于精准控制渲染范围，避免误将整个 <button> 或 <mat-icon> 一并隐藏。
直接在文本插值 {{t('commonActions.cancel')}} 外层包裹 *ngIf 是无效的（Angular 不允许对纯文本节点单独加结构指令）。此时，<ng-container> 是最佳解决方案：它是一个逻辑容器，不生成实际 DOM 元素，仅用于承载结构指令（如 *ngIf、*ngFor），完美实现“仅条件性插入文本”的需求。
✅ 正确写法如下：
<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()" 确保仅在非移动端（即桌面端）渲染文本；
- <ng-container> 不影响布局、样式或可访问性（无障碍阅读器仍能正常识别按钮整体语义）；
- 切勿使用 <span *ngIf="..."> 替代——虽然可行，但会引入无意义的 DOM 节点，增加冗余；<ng-container> 更语义清晰、性能更优；
- 确保 isMobile() 方法已在组件类中正确定义并返回布尔值（例如基于 BreakpointObserver 或 window.innerWidth 判断）。
? 小结：当需在保留父元素结构的前提下对局部内容做条件渲染时，<ng-container> 是 Angular 提供的轻量、标准且推荐的工具。它让模板逻辑更清晰，也更符合响应式 UI 的开发实践。
