@ angular / flex-layout не работает с @HostBinding

flex-layout не применяет встроенные стили к элементам хоста, где элементы хоста получают свои атрибуты flex-layout через @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">, но встроенные стили гибкого макета не применяются.

Невозможно использовать автономный селектор <column-node> в вашем html Все ваши пользовательские селекторы, независимо от того, сколько их может быть на странице, нуждаются во встроенной разметке гибких атрибутов.

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> Этот код будет чрезвычайно сложно сканировать со всей этой гибкой разметкой ....


angular flexbox angular-material2
person ndesign11    schedule 30.12.2016    source источник
comment
В настоящее время я столкнулся с той же проблемой. @ ndesign11, вы нашли решение? Если да, поделитесь, пожалуйста.   -  person sam    schedule 28.04.2017
comment
У меня такая же проблема. Есть ли у кого-нибудь обходной путь?   -  person Twois    schedule 12.06.2017

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, проблема в том, что 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 ...

Директивы применяются только в том случае, если атрибут статически добавлен в шаблон.

Как правило, нет способа применить директиву к элементу хоста.

person Günter Zöchbauer    schedule 02.01.2017
comment
Гюнтер, какое решение или совет? - person sam; 28.04.2017

arrow_upward
0
arrow_downward

Самый простой способ - добавить еще один 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, которые применяются директивами.

person Simon_Weaver    schedule 04.08.2018