@ angular / flex-layout不能与@HostBinding一起使用

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';
}

在DOM< column-node fxLayout =“column”>中添加fxLayout属性.但是没有应用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标记扫描这段代码将非常困难….

解决方法

我认为问题是当元素上没有直接的fxLayout属性时,不应用LayoutDirective.

从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 ...

只有在将属性静态添加到模板时才会应用指令.

通常无法将指令应用于主机元素.