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

还有 child :

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