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

DOM fxLayout中添加了

<column-node fxLayout="column">属性，但未应用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标记扫描这段代码非常困难....

Answer 1

我认为问题是当元素上没有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 ...

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

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

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 docs解释了指令适用的所有等效CSS。

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

2 个答案: