如何使用fxLayout for Angular Material仅在移动设备中而不是在桌面上显示某些内容

这是我的密码：

<div fxLayout="column" fxHide.xs
  style ="background-color: #263238; color: white; border-top: none;">
  <button mat-icon-button fxHide.md>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button fxHide.md>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button fxHide.md>
        <mat-icon>favorite</mat-icon>
    </button>
  </div>

最喜欢的
最喜欢的
最喜欢的

上面是一个容器，我只想在手机上显示，而不想在浏览器上显示。我应该如何开始编码呢

将自定义断点用作

custom-breakpoints.ts

现在进入应用程序模块

import {InjectionToken, NgModule} from '@angular/core';
import {BREAKPOINTS, DEFAULT_BREAKPOINTS, FlexLayoutModule} from '@angular/flex-layout';

export const BreakPointsProvider = { 
  provide: BREAKPOINTS,
  useValue: DEFAULT_BREAKPOINTS,
  multi: true
};

@NgModule({
  imports: [
    ...
    FlexLayoutModule,
  ],
  providers: [
    ...
    BreakPointsProvider,
  ]
})
export class AppModule {
}

---

尝试使用上述方法实现移动断点，然后使用别名来隐藏和显示

，而不是fxHide.xs。您可以使用

fxHide.gt-sm

---

仅在移动设备上显示这不是一个真正的解决方案，但我发现flex hide和show似乎只在我的应用程序中起作用。组件

您可以使用平台API-您好，我不熟悉Fxlayout，但我认为这应该起作用

fxHide.sm=“false”

fxHide.md=“true”尝试使用这行代码

@AshotAleqsanyan不，它仍然不起作用。谢谢你的尝试@AliWahab谢谢，但它仍然不起作用…：/为什么有两个应用程序模块？嗨。。我也试过了，但同样没有用。。。出于某种原因。。。这仅适用于app.component

import {InjectionToken, NgModule} from '@angular/core';
import {BREAKPOINTS, DEFAULT_BREAKPOINTS, FlexLayoutModule} from '@angular/flex-layout';

export const BreakPointsProvider = { 
  provide: BREAKPOINTS,
  useValue: DEFAULT_BREAKPOINTS,
  multi: true
};

@NgModule({
  imports: [
    ...
    FlexLayoutModule,
  ],
  providers: [
    ...
    BreakPointsProvider,
  ]
})
export class AppModule {
}

fxHide.gt-sm