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

【问题标题】：How to show something only in mobile and not desktop using fxLayout for Angular Material如何使用 fxLayout for Angular Material 仅在移动设备而非桌面设备中显示某些内容
【发布时间】：2020-04-05 11:58:05
【问题描述】：

这是我的代码：

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

上面是一个容器，我只想在移动设备上显示，而不是在浏览器上显示。我应该如何编写代码？

【问题讨论】：

您可以使用平台 API - material.angular.io/cdk/platform/api
嗨，我不熟悉 Fxlayout，但我认为这应该可以工作 fxHide.sm="false" fxHide.md="true"
尝试使用这条线<div fxHide fxShow.xs></div>
@AshotAleqsanyan 不，它仍然不起作用。感谢您的尝试！
@AliWahab 谢谢，但它仍然无法正常工作......：/

标签： angular flexbox angular-material progressive-web-apps

【解决方案1】：

https://github.com/angular/flex-layout/wiki/BreakPoints#custom-breakpointsts

使用自定义断点作为

custom-breakpoints.ts

import {BREAKPOINT} from '@angular/flex-layout';

const CUSTOM_BREAKPOINTS = [{
  alias: 'xs.mobilescreen',
  suffix: 'XsMobileScreen',
  mediaQuery: 'screen and (max-width: 480px)',
// Your break points for the specific screen width
  overlapping: false,
}];

export const CustomBreakPointsProvider = { 
  provide: BREAKPOINT,
  useValue: CUSTOM_BREAKPOINTS,
  multi: true
};

my-app-module.ts
import {CommonModule, NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
import {CustomBreakPointsProvider} from './custom-breakpoints.ts';

@NgModule({
  imports : [
    CommonModule,
    FlexLayoutModule,
  ],
  providers: [
    CustomBreakPointsProvider,     // Adds breakpoints for mobile mediaQueries
  ]
})
export class MyAppModule {
}

现在在应用模块中

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 {
}

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

【讨论】：

为什么有2个app模块？

【解决方案2】：

你可以使用类似

的东西来代替 fxHide.xs

fxHide.gt-sm

仅在移动设备上显示

【讨论】：

嗨..我也试过了，但同样无济于事......出于某种原因......这只适用于app.component

【解决方案3】：

这不是一个真正的解决方案，但我发现 flex hide 和显示似乎只在我的 app.component 中工作

【讨论】：