无需自定义断点提供者，能否修改FxFlex默认sm、md断点值？

Great question! You absolutely can tweak FxFlex's default sm and md breakpoints without having to build a full custom breakpoint provider. Here's a straightforward way to override the default values directly in your Angular app:

Step 1: Modify the default breakpoint configuration in your AppModule #

Angular Flex Layout exposes the DEFAULT_BREAKPOINTS constant which defines all the default breakpoints. You can clone this array, adjust the sm and md entries, and provide the modified version to override the defaults.

Add this code to your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexModule, DEFAULT_BREAKPOINTS, BREAKPOINTS, Breakpoint } from '@angular/flex-layout';

// Clone and modify the default breakpoints
const CUSTOM_BREAKPOINTS: Breakpoint[] = DEFAULT_BREAKPOINTS.map(breakpoint => {
  // Update the `sm` breakpoint range
  if (breakpoint.alias === 'sm') {
    return {
      ...breakpoint,
      mediaQuery: 'screen and (min-width: 600px) and (max-width: 900px)'
    };
  }
  // Update the `md` breakpoint range
  if (breakpoint.alias === 'md') {
    return {
      ...breakpoint,
      mediaQuery: 'screen and (min-width: 900px) and (max-width: 1279px)'
    };
  }
  // Keep all other breakpoints unchanged
  return breakpoint;
});

@NgModule({
  declarations: [
    // Your app's components go here
  ],
  imports: [
    BrowserModule,
    FlexModule
  ],
  providers: [
    // Provide our custom breakpoints to override the defaults
    { provide: BREAKPOINTS, useValue: CUSTOM_BREAKPOINTS }
  ],
  bootstrap: [/* Your root component (e.g., AppComponent) */]
})
export class AppModule { }

Step 2: Verify the changes #

Once you've set this up, any FxFlex, fxLayout, or other Flex Layout directives in your app will automatically use your updated breakpoint ranges. For example:

• Elements with fxFlex.sm will now activate when the viewport is between 600px and 900px
• Elements with fxFlex.md will activate when the viewport is between 900px and 1279px

Note about Angular Material components #

If you're using Angular Material components (like MatSidenav) that rely on breakpoints, you'll need to adjust their breakpoint configuration separately (using MAT_BREAKPOINTS), but this approach specifically targets FxFlex and other Flex Layout directives as you requested.

内容的提问来源于stack exchange，提问作者Geraj