Question

这是我的代码：

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

以上是我只想在移动设备上而不在浏览器上显示的容器。我应该如何编码？

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

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

Answer 2

您可以使用

代替fxHide.xs

fxHide.gt-sm

仅在移动设备上显示

Answer 3

这并不是真正的解决方案，但我发现flex hide并仅在我的app.component中显示

如何使用Angular Material的fxLayout仅在移动设备而非桌面上显示内容

3 个答案: