Как использовать Angular Flex ngClass с настраиваемыми точками останова? - PullRequest
Новая
       112

Как использовать Angular Flex ngClass с настраиваемыми точками останова?

0 голосов
/ 07 мая 2020

Я нашел этот отличный пакет @ 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 игнорируется. Но что я делаю не так?

1 Ответ

0 голосов
/ 05 августа 2020

Сначала вам нужно создать специальную директиву и импортировать ее в свои модули. Поскольку вы используете 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>
...