Question

我正在尝试创建样式生成器，以在未指定here的情况下生成默认的fxLayoutGap：

这是我的设置

模块

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

default-layout-gap-style-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';结尾，则它将返回空对象，并且不会为您提供间隙布局。我猜您会为您的用例使用其他生成器或输入。

Answer 2

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

可能还需要覆盖 sideEffect：

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

或者在 1011 中，@rovercoder 可以通过 MediaMarshaller 解决

如何创建Angular Flex-Layout样式生成器以生成默认的fxLayoutGap？

2 个答案: