@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 内联样式没有被应用。

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

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> 这段代码将会因为所有这些 flex 标记而变得极难扫描....

- ndesign11

---

我目前也遇到了同样的问题。@ndesign11，你找到解决方案了吗？如果是，请分享一下。 - sam

我也遇到了同样的问题。有人有解决方法吗？ - Twois

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

只有当属性静态添加到模板中时，指令才会生效。

通常情况下，无法将指令应用于宿主元素。

- Günter Zöchbauer

---

Gunter，有什么解决方案或建议吗？ - sam

Answer 2

最简单的方法是在您的组件内部添加另一个DIV，虽然有时会不可避免地增加代码维护难度，但这通常是最易于维护和最清晰的方法。

或者，对于更简单的情况，您可以手动应用CSS。

:host 
{
   display: flex;
   flex-direction: column
}

或者如果它需要是动态的

@HostBinding('style.display') style_display = 'flex';
@HostBinding('style.flexDirection') get style_flexDirection() { return 'column'; }

即使您没有在父组件上设置fxLayout，仍然可以在组件内部使用其他指令。

此外，请注意，如果您更新主机绑定属性，则实际上它们“属于”父级以进行更改检测 - 这可能会导致烦人的更改检测错误消息。大多数情况下不会发生这种情况，但需要注意。

API文档解释了指令应用的所有等效CSS。

- Simon_Weaver