如何设置 ng-content 的样式

How to style ng-content

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

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

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

更新

::slotted 现在受到所有新浏览器的支持，并且可以与 ViewEncapsulation.ShadowDom

一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

原创

::content xxx { ... } 也可能有效或 :host xxx { ... }。匀场不是非常严格或准确。 AFAIK（>>> /deep/ 旧）::ng-deep（由 SASS 支持）和 space 当前相同。

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

如果您确实需要设置样式（有时您会这样做），您有两个选择：

1。直接写 CSS

您可以创建一个常规的 CSS 文件并像这样设置内容的样式。您几乎可以肯定使用了 shadow DOM polyfill。常规 CSS 将看穿 polyfill 并仅设置元素样式。假设您有一个应用侧边栏。你可以写：

app-sidebar p {
  color:red;
}

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

2。使用 :host /deep/ select 或

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

的影子 DOM polyfill
  • :host 将 select 元素。
  • /deep/ 将 select 元素添加到 selector 嵌套的 select 或不添加模拟阴影 DOM 属性。

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

像这样：

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

这解决了我的问题

::ng-deep {
    & > * {
         // styles here
    }
}

作为上述答案的替代方法，您可以创建一个应用于内容的指令，并使用该指令为内容添加样式。