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

fxLayout属性已添加到dom<column-node fxLayout="column">中，但未应用flex布局内联样式。
不能在所有自定义选择器中使用独立选择器，无论页面中可能有多少需要内联flex属性标记。
<column-node>使用所有这些flex标记扫描此代码将非常困难….

最佳答案

我认为问题在于当元素没有直接的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 ...

只有静态地将属性添加到模板时，才应用指令。
一般来说，没有办法将指令应用于宿主元素。