У меня есть 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
не работает.
Какие-либо предложения ?