Я пытаюсь выяснить, как установить пользовательские стили для применения внутри ngTemplateOutlet в Angular.У меня есть два компонента, родительский и дочерний, и я передаю шаблон от родительского к дочернему, который затем печатается с использованием ngTemplateOutlet.Я хотел бы сделать так, чтобы шаблоны отображались с использованием родительского и дочернего стилей, а не одного или другого.
Вот как выглядит HTML моего родительского компонента:
<child-component [template]="myTemplate">
<ng-template #myTemplate>
<p class="paragraph">Hello</p>
</ng-template>
</child-component>
CSS:
.paragraph { color: red; }
И потомок:
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
CSS:
.paragraph { font-weight: bold; }
Я хотел бы видеть «Hello» с краснымфон и жирным шрифтом, но теневая DOM-инкапсуляция Angular заставляет шаблон игнорировать дочерние стили.
Я знаю, что могу решить эту проблему, удалив инкапсуляцию DOM, но это не вариант, так как я хочуИзбегайте добавления классов CSS в глобальное пространство имен.Поэтому мне интересно, есть ли способ добиться желаемого эффекта в Angular.