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; }
}