@ Winkel/flex-Layout nicht mit @HostBinding

Question

Flex-Layout arbeitet das Inline-Styles auf dem Host-Elementen nicht anwenden, wo die Host-Elemente ihr Flex-Layout bekommen Attribute über @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 Attribut hinzugefügt in DOM <column-node fxLayout="column"> aber Flex-Layout Inline-Stile werden nicht angewendet.

kann nicht allein verwendet Selektor <column-node> in Ihrem html Alle Ihre benutzerdefinierten Selektoren, egal wie viele Sie in einer Seite haben, müssen die Inline-Flex-Attribute Markup.

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> Dieser Code wird extrem schwierig sein, mit all diesem Flex Markup zu scannen ....

Answer 1

Ich denke, das Problem ist, dass die LayoutDirective nicht angewandt wird, wenn es kein fxLayout Attribut für das Element direkt.

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

Richtlinien werden nur angewendet, wenn das Attribut statisch an der Vorlage hinzugefügt wird.

Es gibt im Allgemeinen keine Möglichkeit, eine Anweisung auf ein Hostelement anzuwenden.