Как установить стиль компонента хоста из включенного компонента - PullRequest
Новая
       29

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

0 голосов
/ 25 февраля 2019

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

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

<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 не работает.

Есть предложения?

1 Ответ

0 голосов
/ 25 февраля 2019

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

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

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

...