Angular2 — как не потерять связь стилей при подключении компонента?

Question

[Владимир Мирка]

Суть вопроса:

<div style="display: flex">
<app-component><!-- Внутри флекс элементы --></app-component>
</div>

В таком случае, связь теряется и флекс-элементом становится <app-component>, а не то, что внутри.
Вопрос: Как это исправить? Компонент должен остаться директивой.

Answer 1

[Ivan Stroykin]

<div>
    <app-component><!-- Внутри флекс элементы --></app-component>
</div>

...
@Component({
  selector: 'app-component',
  templateUrl: '...',
  host: {
    'class': 'app-flex-style'
  }
})
export class AppComponent {
  ....
}

и прописываете классу .app-flex-style { display: flex } и всё остальное, что нужно. Не надо засорять html, и нужно всё раскладывать по полочкам для лёгкой манипуляции приложением

Comments

[Владимир Мирка]

Спасибо

[Алексей Зуев]

Еще можно @HostBinding использовать или вообще селектор типа [app-component] или [root] и вешайте на body. Будет чище и меньше кода)

[Ivan Stroykin]

Алексей Зуев, Да я вот иногда смотрю, что лучше, через host: { ... } или @HostBinding. И всегда спорное ощущение возникает почему-то :)

[Алексей Зуев]

Иван Стройкин, Ага, вроде хост короче выглядит

[Алексей Зуев]

Есть еще способ задать класс через propMetadata или через propDecorators. Если создаете компонент динамически то можно еще один трюк использовать selector: 'my-comp.someClass' и тогда someClass автоматом добавится к созданной ноде

[Ivan Stroykin]

Алексей Зуев, Вот этого не знал, спасибо ))
Через @HostBinding получается вот так, если не ошибаюсь?

@HostBinding('class.app-flex-style') appFlexClass = true;

[Алексей Зуев]

Иван Стройкин, Угу, можно и так еще @HostBinding('class') x = 'app-flex-style'; и className вместо class

[Ivan Stroykin]

Алексей Зуев, Интересно)
Тут видимо от случая всё зависит. Когда мало чего используется (класс добавить только или еще чего), то лучше через @HostBinding, а если много всего, то удобнее через host: {...}. К примеру в select Material Desing вот такой вот host:

host: {
    'role': 'listbox',
    '[attr.id]': 'id',
    '[attr.tabindex]': 'tabIndex',
    '[attr.aria-label]': '_ariaLabel',
    '[attr.aria-labelledby]': 'ariaLabelledby',
    '[attr.aria-required]': 'required.toString()',
    '[attr.aria-disabled]': 'disabled.toString()',
    '[attr.aria-invalid]': 'errorState',
    '[attr.aria-owns]': '_optionIds',
    '[attr.aria-multiselectable]': 'multiple',
    '[attr.aria-describedby]': '_ariaDescribedby || null',
    '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
    '[class.mat-select-disabled]': 'disabled',
    '[class.mat-select-invalid]': 'errorState',
    '[class.mat-select-required]': 'required',
    'class': 'mat-select',
    '(keydown)': '_handleKeydown($event)',
    '(focus)': '_onFocus()',
    '(blur)': '_onBlur()',
  },

[Алексей Зуев]

Иван Стройкин, В host/HostBinding можно использовать все свойства, которые можно найти у элемента. Ангуляр их распаковывает в специальную схему, так что чтобы не ошибиться можно смотреть тут https://github.com/angular/angular/blob/308fc8e328...

[Ivan Stroykin]

Алексей Зуев, Добавил в закладки, спасибо )

[Алексей Зуев]

Иван Стройкин, Material использует host в первую очередь по следующим соображениям https://github.com/angular/material2/blob/f29da635...

[Ivan Stroykin]

Алексей Зуев, Ааа, вот в чем причина оказывается. Спасибо )

Answer 2

[Sasha Novik]

Еще есть один вариант, который в некоторых случаях может быть полезен (например, при работе с таблицами).

Добавить в селектор компонента атрибут:

...
@Component({
  selector: 'app-component,[appComponent]',
  templateUrl: '...',
})
export class AppComponent {
  ....
}

И потом использовать его на элементе:

<div appComponent style="display: flex">
  <!-- Внутри флекс элементы -->
</div>

Answer 3

[Александр Манаков]

<div>
<app-component style="display: flex"><!-- Внутри флекс элементы --></app-component>
</div>

Comments

[Владимир Мирка]

Большой костыль

Answer 4

[Владимир]

Можно держать проект на https://c9.io/ и тогда можно редактировать и на айпаде и на андроидном планшете.