Angular：子 ngTemplateOutlet 中的自定义 CSS

Question

我试图找出如何设置要在 Angular 的 ngTemplateOutlet 中应用的自定义样式。我有两个组件，一个父组件和一个子组件，我将一个模板从父组件传递给子组件，然后使用 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”，但是 Angular 的 shadow DOM 封装迫使模板忽略孩子的样式。

我知道我可以通过删除 DOM 封装来解决这个问题，但这不是一个选项，因为我想避免将 CSS 类添加到全局命名空间。所以我想知道是否有一种方法可以在 Angular 中干净地实现期望效果。

Answer 1

尝试这个：

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