flexaccess
@flexaccess
Намерен работать программистом

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

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

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


В таком случае, связь теряется и флекс-элементом становится <app-component>, а не то, что внутри.
Вопрос: Как это исправить? Компонент должен остаться директивой.
  • Вопрос задан
  • 210 просмотров
Решения вопроса 1
StivinKing
@StivinKing
<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, и нужно всё раскладывать по полочкам для лёгкой манипуляции приложением
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
navix
@navix
Angular & TypeScript
Еще есть один вариант, который в некоторых случаях может быть полезен (например, при работе с таблицами).

Добавить в селектор компонента атрибут:
...
@Component({
  selector: 'app-component,[appComponent]',
  templateUrl: '...',
})
export class AppComponent {
  ....
}


И потом использовать его на элементе:
<div appComponent style="display: flex">
  <!-- Внутри флекс элементы -->
</div>
Ответ написан
<div>
<app-component style="display: flex"><!-- Внутри флекс элементы --></app-component>
</div>
Ответ написан
Можно держать проект на https://c9.io/ и тогда можно редактировать и на айпаде и на андроидном планшете.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы