Angular：在 child ngTemplateOutlet 中自定义 CSS

Question

我正在尝试了解如何设置要在 Angular 中的 ngTemplateOutlet 中应用的自定义样式。我有两个组件，一个 parent 和一个 child，我将一个模板从 parent 传递到 child，然后使用 ngTemplateOutlet 打印它。我想做的是同时使用 parent 和 child 的样式来呈现模板，而不仅仅是其中一种。

这是我的 parent 组件的 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 封装迫使模板忽略 child的风格。

我知道我可以通过删除 DOM 封装来解决这个问题，但这不是一个选项，因为我想避免将 CSS 类添加到全局命名空间。所以我想知道是否有一种方法可以在 Angular.

中干净地实现期望的效果

Answer 1

试试这个：

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

Angular：在 child ngTemplateOutlet 中自定义 CSS

Angular: custom CSS inside child ngTemplateOutlet

css

angular

shadow-dom

ng-template