html - 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>

应该这样做。