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

【问题标题】：How to create an Angular Flex-Layout stylebuilder to generate a default fxLayoutGap?如何创建 Angular Flex-Layout stylebuilder 来生成默认的 fxLayoutGap？
【发布时间】：2021-02-09 03:07:22
【问题描述】：

我正在尝试创建一个样式生成器来生成默认的fxLayoutGap，如果没有指定，如here 所述：

这是我的设置

模块

@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。

【问题讨论】：

标签： angular flexbox angular-flex-layout

【解决方案1】：

根据source code，如果您传入的值（在这种情况下为“10px”）不以' grid'; 结尾，那么它将返回空对象并且不会为您提供间隙布局。我猜你会想为你的用例使用不同的构建器或输入。

【讨论】：

【解决方案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 解决方法

【讨论】：