2016-12-30 80 views
3

柔性佈局工作不施加內聯樣式上,其中主機元件得到他們的柔性佈局主機元件經由@HostBinding@角/柔性佈局不與@HostBinding

@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">該代碼將是非常困難的掃描這一切柔性標記....

+0

我目前面臨同樣的問題。 @ ndesign11,你找到了解決方案嗎? 如果是,請分享。 – sam

+0

我也有同樣的問題。有沒有人有一些解決方法? – Twois

回答

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

指令如果屬性是靜態添加到模板只應用。

通常沒有辦法將指令應用於主機元素。

+0

甘特,任何解決方案或建議? – sam