angular - 如何设置 ng-content 的样式

Question

我正在学习有关嵌入的教程 https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

但是没有提及如何设置最终替换 ng-content 的元素的样式。

如果前面有 /deep/ 关键字，我似乎只能在 css 中定位那些元素，这通常在定位嵌套组件时使用。这样对吗？

Answer 1

里面的内容<ng-content>与组件绝缘。它看不到组件的属性或样式。

如果您确实需要对其进行样式设置(有时您会这样做)，您有两个选择:

1。只需编写 CSS

您可以创建一个常规的 CSS 文件并为其设置样式。您几乎可以肯定正在使用 shadow DOM polyfill。常规 CSS 将看穿 polyfill 并只为元素设置样式。假设您有一个应用侧边栏。你可以这样写:

app-sidebar p {
  color:red;
}

如果您使用的是 ng-cli，您在 style.scss 中编写的任何规则都将是全局的。

2。使用 :host/deep/选择器

如果您想使用影子 DOM polyfill 并使用 style 为您的组件设置样式或 styleUrls Component 的属性装饰器，用 :host 选择元素，然后忽略带有 /deep/ 的阴影 DOM polyfill子选择器。

• :host将选择元素。
• /deep/将在不将模拟阴影 DOM 属性选择器添加到嵌套选择器的情况下选择元素。

将它们放在一起，您可以选择嵌套在宿主组件元素内的所有元素，而不管它们在何处声明。

像这样:

:host /deep/ p {
  color:red;
}