Как установить стиль основного компонента из включенного компонента

У меня есть 2 компонента, родитель и ребенок. Родитель содержит дочерний элемент и использует его для переноса содержимого и добавления к нему заголовка. Для этого дочерний компонент использует трансклюзию.

Родительский шаблон выглядит так:

<div class="parent">
  <child [title]="componentTitle" class="child">
    <p>some content</p>
  </child>  
</div>

Дочерний шаблон выглядит так:

<div class="child">
  <h2 class="title">{{title}}</h2>
  <ng-content></ng-content>
</div>

Когда я пытаюсь управлять стилями с помощью CSS родительского компонента, я могу достаточно просто справиться со всем включенным содержимым:

.child p {
  background-color: blue;
}

Однако я не могу добраться до элемента title. Другими словами, следующее правило не работает:

.child h2.title {
  background-color: red;
}

Поскольку родитель является хозяином дочернего элемента, использование :host не работает.

Какие-либо предложения ?


angular css transclusion
person ethanfar    schedule 25.02.2019    source источник
comment
Возможный дубликат Как стилизовать дочерние компоненты из CSS родительского компонента файл?   -  person Christian Benseler    schedule 25.02.2019
comment
@ChristianBenseler Я не видел этого вопроса, возможно, вы правы. Я предполагал, что не могу установить стиль из-за включения, но я думаю, что проблема еще более проста.   -  person ethanfar    schedule 26.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Ну, вы могли бы сделать что-то вроде этого:

::ng-deep {
    .child h2.title {
        background-color: red;
    }
}

Я думаю, что это устарело. Наиболее подходящий способ - передать вход дочернему элементу. Я рекомендую: 1) добавить заголовок @Input() в дочерний класс. 2) стиль .red css с фоновым цветом: красный. к дочернему css 3) добавление [ngClass]="titleColor" к дочерним классам h2

person bgraham    schedule 25.02.2019
comment
Я думал об использовании входных данных, однако я пытаюсь установить цвет с помощью переменной CSS, которую мне не удалось передать. - person ethanfar; 25.02.2019
comment
Одним из вариантов может быть использование scss. Это позволит использовать глобальные переменные - person bgraham; 25.02.2019
comment
Angular также позволяет использовать глобальные переменные, используя псевдоселектор :root, который я использую в данный момент. Однако проблема в том, что я не вижу способа передать имя такой переменной компоненту, а затем заставить CSS этого компонента правильно оценить его. Я также пытался передать его как строку, что также не сработало. - person ethanfar; 26.02.2019