Angular：子 ngTemplateOutlet 内的自定义 CSS答案

【问题标题】：Angular: custom CSS inside child ngTemplateOutletAngular：子 ngTemplateOutlet 内的自定义 CSS
【发布时间】：2019-08-23 21:03:51
【问题描述】：

我正在尝试找出如何设置自定义样式以在 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 中干净地实现期望的效果。

【问题讨论】：

【解决方案1】：

试试这个：

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

【讨论】：

@unpollito 非常欢迎！！！如果它适合你，请接受这个答案:)
我会的。 StackOverflow 只是强迫我等待 15 分钟才能接受它。 :)
用::ng-deep代替/deep/是recommended。
@VikasJadhav 从您的链接：“阴影穿透后代组合器已被弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep 的所有 3 /, >>> 和 ::ng-deep）。在此之前 ::ng-deep 应该是首选，以便与这些工具有更广泛的兼容性。”
@VikasJadhav - 是的，但 Angular 建议使用 ::ng-deep。