角度：子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; }
}