Блог

Я пытаюсь выяснить, как настроить пользовательские стили, которые будут применяться внутри 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; }
  

Чего бы я хотел, так это увидеть «Привет» на красном фоне и жирными буквами, но инкапсуляция теневого DOM в Angular заставляет шаблон игнорировать дочерние стили.

Я знаю, что могу решить эту проблему, удалив инкапсуляцию DOM, но это не вариант, поскольку я хочу избежать добавления классов CSS в глобальное пространство имен. Итак, мне интересно, есть ли способ чисто достичь желаемого эффекта в Angular.

Попробуйте это:

 ::ng-deep{
 .paragraph { font-weight: bold; }
}