Angular @角度/柔性布局不适用于@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';
}

@组件({
选择器：'列节点'，//flex布局不适用于主体元素
主机：{'[@visibility]:'visibility'}，
模板：``，
})    
导出类LayoutColumnNodeComponent{
@主机绑定（'attr.fxLayout'）fxLayout='column'；
}

fxLayout

属性添加到DOM

中，但未应用flex布局内联样式

无法在

html

中使用独立选择器

，无论页面中有多少个自定义选择器需要内联flex属性标记

---

使用所有这些flex标记扫描此代码将非常困难……

我认为问题在于当元素上没有

fxLayout

属性时，

LayoutDirective

没有应用

从

仅当静态地将属性添加到模板中时，才会应用指令

---

通常没有办法将指令应用于主机元素。

最简单的方法是在组件中添加另一个DIV，这通常是最容易维护和最干净的方法

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

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

或者如果它需要动态的话

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

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

fxLayout

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

---

解释指令应用的所有等效css。

我目前面临相同的问题@ndesign11，你找到解决方案了吗？如果是，请分享。我也有同样的问题。有人有解决办法吗？冈特，有什么解决办法或建议吗？

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