如何使用Angular 8设置Angular Flex Layout断点

Question

没有人知道如何使用Angular 8和Angular Flex Layout设置Flex Layout断点。我试图像这样在模板中使用它们：

    <div fxFlex="100%" fxFlex.md="20%" fxFlex.gt-md="50%">
        My Content
    </div>

目前无法使用。我的一些设置：

• constants.ts文件中的断点数组：

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

        export const OVERRIDE_BREAKPOINTS = [
            {
                alias: 'xs',
                mediaQuery: 'screen and (min-width: 1px) and (max-width: 599px)',
                overlapping: false
            },
            ...
        ]

         export const BreakPointsProvider = {
             provide: BREAKPOINTS,
             useValue: OVERRIDE_BREAKPOINTS,
             multi: true
         };

• app.module.ts中的设置：

        imports: [
            FlexLayoutModule.withConfig({}, OVERRIDE_BREAKPOINTS),
            ...
        ]


        providers: [
            BreakPointsProvider
            ...
        ]

我不知道我还应该添加什么来使其正常工作。

提前感谢！

Answer 1

您需要像这样更新HTML：