如何创建一个 Angular Flex-Layout stylebuilder 来生成默认的 fxLayoutGap？

Question

如果指定 none，我正在尝试创建一个样式生成器来生成默认值 fxLayoutGap，如 here:

所述

这是我的设置

模块

@NgModule({
    ...
    providers: [{
        provide: LayoutGapStyleBuilder,    // when default is requested
        useClass: DefaultLayoutGapStyleBuilder  // provide instead custom builder
    }]
})

默认布局间隙样式-builder.ts

import { Injectable } from '@angular/core';
import { LayoutGapParent, LayoutGapStyleBuilder, StyleDefinition } from '@angular/flex-layout';

@Injectable()
export class DefaultLayoutGapStyleBuilder extends LayoutGapStyleBuilder {
    buildStyles(input: string, parent: LayoutGapParent): StyleDefinition {

        input = input || '10px';    

        return super.buildStyles(input, parent); // THIS RETURNS { }
    }
}

view.html

<div fxLayout="row wrap" fxLayoutGap>

一切似乎都已正确连接，但对 super.buildStyles 的调用未返回任何内容，因此未应用默认间隙样式 10px。

Answer 1

根据 source code 如果您传入的值，在本例中为 '10px'，不以 ' grid'; 结尾，那么它将 return 空对象而不给你的差距布局。我猜您会希望为您的用例使用不同的构建器或输入。

Answer 2

来自@CaerusKaru：https://github.com/angular/flex-layout/issues/1011

可能还需要覆盖副作用：

sideEffect(gapValue: string, _styles: StyleDefinition, parent: LayoutGapParent): void { 
  gapValue = gapValue ? gapValue : '0rem'; 
  super.sideEffect( gapValue,_styles,parent ); 
}

或者在 1011 中@rovercoder 可以使用 MediaMarshaller

解决方法

如何创建一个 Angular Flex-Layout stylebuilder 来生成默认的 fxLayoutGap？

How to create an Angular Flex-Layout stylebuilder to generate a default fxLayoutGap?

angular

flexbox

angular-flex-layout