@angular/flex-layout 不适用于 @HostBinding

Question

flex-layout 不会在宿主元素上应用内联样式，其中宿主元素通过 @HostBinding 获取它们的 flex-layout 属性

@Component({
    selector: 'column-node',  //flex-layout not working on host elements
    host: { '[@visibility]': 'visibility' },
    template: `<ng-content></ng-content>`,
})    

export class LayoutColumnNodeComponent {
    @HostBinding('attr.fxLayout') fxlayout = 'column';
}

fxLayout属性已添加到 DOM 中，<column-node fxLayout="column">但未应用 flex-layout 内联样式。

不能<column-node>在您的html所有自定义选择器中使用独立选择器，无论页面中有多少需要内联 flex 属性标记。

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> 使用所有这些 flex 标记扫描此代码将非常困难....

Answer 1

我认为问题在于，当元素上LayoutDirective没有直接属性时，不应用。fxLayout

来自https://github.com/angular/flex-layout/blob/057fd5c6eec57e94b300eb49d53d38b611e25728/src/lib/flexbox/api/layout.ts

@Directive({selector: `
  [fxLayout],
  [fxLayout.xs]
  [fxLayout.gt-xs],
  [fxLayout.sm],
  [fxLayout.gt-sm]
  [fxLayout.md],
  [fxLayout.gt-md]
  [fxLayout.lg],
  [fxLayout.gt-lg],
  [fxLayout.xl]
`})
export class LayoutDirective extends ...

仅当属性静态添加到模板时才应用指令。

通常无法将指令应用于宿主元素。