更改 FXFlex 断点值

Question

是否可以在不定义自定义断点提供程序的情况下更改和使用 FxFlex 默认断点值？

我想更改别名 sm 和 md 的断点媒体查询。来自

sm  'screen and (min-width: 600px) and (max-width: 959px)'
md  'screen and (min-width: 960px) and (max-width: 1279px)'

类似于

sm  'screen and (min-width: 600px) and (max-width: 900px)'
md  'screen and (min-width: 900px) and (max-width: 1279px)

Answer 1

在node_modules/@angular/flex-layout/__ivy_ngcc__\esm2015中有一个名为'core.js'的文件，在那个文件中有一个名为'DEFAULT_BREAKPOINTS'的常量，在这个常量中定义了默认断点，你可以改变他的值，但是我不知道这样做是否安全，我假设你每次更新包时都必须更改它。

文件中也有相同的 const（或在某些情况下为 var）：

node_modules/@angular/flex-layout/esm2015/core.js
node_modules/@angular/flex-layout/esm5/core.es5.js
node_modules/@angular/flex-layout/bundles/flex-layout-core.umd.js

请注意，每个文件都有自己的引用断点变量的映射，您可能需要更改您更改的文件的映射

希望对您有所帮助

Answer 2

是的，这是可能的。例如，要将 XL 断点从 1920px 更改为 1600px，请将此代码添加到您的 app.module.ts :

import { DEFAULT_BREAKPOINTS } from "@angular/flex-layout";

DEFAULT_BREAKPOINTS.find(item => item.alias == "lg").mediaQuery = "screen and (min-width: 1280px) and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "xl").mediaQuery = "screen and (min-width: 1600px) and (max-width: 4999.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "lt-xl").mediaQuery = "screen and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "gt-lg").mediaQuery = "screen and (min-width: 1600px)";

更改 FXFlex 断点值

Change FXFlex breakpoint values

angular8

angular-flex-layout