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的阴影DOM封装强制模板忽略孩子的样式。

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

Answer 1

试试这个：

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