angular - 如何使用带有自定义断点的 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，因此要修复它:

自定义断点.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,
};

自定义指令.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>