angular - @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您所有的自定义选择器，无论您在一个页面中有多少个，都需要内联弹性属性标记。

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

Answer 1

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

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

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