fxHide.gt-sm 不工作

Question

我有以下 div，它在导航栏上显示一个登录按钮，但如果屏幕很小，我想隐藏这个按钮。出于某种原因，当我将fxHide.gt-sm=true屏幕缩小时，它不会隐藏。我怎样才能解决这个问题？

 <div fxHide.gt-sm="true">
      <ng-template #login>
          <button 
          mat-icon-button
          [routerLink]="['/auth']" 
          [style.width]="'auto'"
          [style.overflow]="'visible'"
          matTooltip="Login or Register"
          class="topbar-button-right">
            <span>Login</span>
            <mat-icon>exit_to_app</mat-icon>
          </button>
        </ng-template>
 </div>

Answer 1

你想要什么：

• 默认行为：显示
• 如果 lt-md（小于中等屏幕）=> 隐藏

通过您当前的实施，您拥有：

• 默认行为：显示
• 如果 gt-sm（大于小屏幕）=> 隐藏

现在，你想要的转化为：

<div fxShow fxHide.lt-md>

您可以将逻辑反转为

<div fxHide fxShow.gt-sm>

那应该这样做。