如何使用带有自定义断点的 Angular Flex ngClass？

Question

我发现了很棒的包@angular/angular-flex 并且在第一刻一切都很好。然后我注意到默认断点与 Bootstrap4 的断点不同。但没问题：自定义断点。

但这里有一个问题：因为定义的断点被忽略了，我找不到解决方案。文档也有点混乱。有时我看到来自 BREAKPOINT 的导入，而下一次看到来自 BREAKPOINTS 的导入。现在什么是正确的？

但这不是战斗。战斗是让代码运行，我希望有人可以帮助我。我在我的项目中使用 Angular 9。

断点定义在：custom-breakpoints.ts

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

export const BS4_BREAKPOINTS = [
    { alias: 'xs', mediaQuery: 'screen and (max-width: 575px)' },
    { alias: 'sm', mediaQuery: 'screen and (min-width: 576px) and (max-width: 767px)' },
    { alias: 'md', mediaQuery: 'screen and (min-width: 768px) and (max-width: 991px)' },
    { alias: 'lg', mediaQuery: 'screen and (min-width: 992px) and (max-width: 1199px)' },
    { alias: 'xl', mediaQuery: 'screen and (min-width: 1200px) and (max-width: 5000px)' },

    { alias: 'lt-sm', mediaQuery: 'screen and (max-width: 575px)' },
    { alias: 'lt-md', mediaQuery: 'screen and (max-width: 767px)' },
    { alias: 'mdtest', mediaQuery: 'screen and (max-width: 767px)' },
    { alias: 'lt-lg', mediaQuery: 'screen and (max-width: 991px)' },
    { alias: 'lt-xl', mediaQuery: 'screen and (max-width: 1199px)' },

    { alias: 'gt-xs', mediaQuery: 'screen and (min-width: 576px)' },
    { alias: 'gt-sm', mediaQuery: 'screen and (min-width: 768px)' },
    { alias: 'gt-md', mediaQuery: 'screen and (min-width: 992px)' },
    { alias: 'gt-lg', mediaQuery: 'screen and (min-width: 1200px)' },
];

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

并且模块声明：

import { CustomBreakPointsProvider } from './services';
import { BS4_BREAKPOINTS } from './services';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FlexLayoutModule.withConfig({ disableDefaultBps: true }, BS4_BREAKPOINTS),
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        CustomBreakPointsProvider, // Adds breakpoints mediaQueries
    ],
})

然后我尝试在 HTML 中应用断点，例如：

<div class="col-md-6" [ngClass.mdtest]="{'alert alert-info': true}">
    ...
</div>

结果是ngClass.mdtest 被忽略。但是我做错了什么？

Answer 1

您需要首先制作一个自定义指令并将其导入您的模块中。由于您使用 ClassDirectives，因此要修复它：

custom-breakpoints.ts

如果要覆盖默认断点设置优先级 1001。

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

export const BS4_BREAKPOINTS = [
    { alias: 'lt-sm', mediaQuery: 'screen and (max-width: 575px)', overlapping: false, priority: 1001 },
    { alias: 'lt-md', mediaQuery: 'screen and (max-width: 767px)', overlapping: false, priority: 1001 },
    { alias: 'mdtest', mediaQuery: 'screen and (max-width: 767px)', overlapping: false, priority: 1001 },
    { alias: 'lt-lg', mediaQuery: 'screen and (max-width: 991px)', overlapping: false, priority: 1001 },
    { alias: 'lt-xl', mediaQuery: 'screen and (max-width: 1199px)', overlapping: false, priority: 1001 },

];

export const CustomBreakPointsProvider = {
    provide: BREAKPOINT,
    useValue: [...BS4_BREAKPOINTS],
    multi: true,
};

custom-directives.ts

import { Directive } from '@angular/core';
import { ClassDirective } from '@angular/flex-layout';

const selector = `[ngClass.mdtest]`;    

const inputs = ['ngClass.mdtest'];


@Directive({selector, inputs})
export class CustomClassDirective extends ClassDirective {
    protected inputs = inputs;
}

custom.module.ts

import { CustomBreakPointsProvider } from './services';
import { BS4_BREAKPOINTS } from './services';
import { CustomClassDirective } from './custom-directives';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FlexLayoutModule.withConfig({ disableDefaultBps: true }, BS4_BREAKPOINTS),
        ...
    ],
    declarations: [
        CustomClassDirective  // Add your custom directive here
    ],
    providers: [
        CustomBreakPointsProvider, // Adds breakpoints mediaQueries
    ],
})

试试这个代码，它现在可以工作了：

<div class="col-md-6" [ngClass.mdtest]="{'alert alert-info': true}">
    ...
</div>