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;隐藏

根据您当前的实施情况，您有：

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

现在，你想要的是：

<div fxShow fxHide.lt-md>

您可以将逻辑反转为

<div fxHide fxShow.gt-sm>

应该这样做。

Answer 2

面对同样的事情，但在导入 FlexLayoutModule 后它起作用了。

Answer 3

fxHide.gt-sm表示当它大于小时隐藏它。如果您只想在大屏幕上看到它，请将其更改为fxShow.gt-sm。

Answer 4

如果OP在使fxHide命令完全起作用时遇到问题，则该问题可能与Angular Material FlexLayout fxHide does not hide重复

您必须确保FlexLayout已导入所有希望使用它的模块中： https://stackoverflow.com/a/62672981/4440629

fxHide.gt-sm不工作

4 个答案: