如何在Angular按钮中使用ngIf结合isMobile()控制文本显示？

直接把文本内容用一个容器（比如<span>）包裹，然后给这个容器加上*ngIf="!isMobile()"即可，这样只会控制文本的显隐，完全不影响按钮本身和图标：

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

说明 #

• 按钮和<mat-icon>部分不受任何条件判断影响，始终渲染
• 仅文本所在的<span>通过*ngIf控制：当isMobile()返回false（PC端）时显示文本，返回true（移动端）时隐藏文本

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