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中是否有一种清晰的方法来实现期望的效果。

- unpollito

Answer 1

试试这个：

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

- Vikas Jadhav

---

@unpollito 非常欢迎！！！如果这个答案对您有用，请接受它:) - Vikas Jadhav

我会的。只是StackOverflow强制让我等待15分钟才能接受它。 :) - unpollito

建议使用 ::ng-deep 代替 /deep/。参考链接。 - ConnorsFan

@VikasJadhav - 是的，但Angular建议使用::ng-deep。 - ConnorsFan

@connorsFn 同意，我会更新我的答案.. 谢谢:) - Vikas Jadhav