如何设置 ng-content 的样式答案

【问题标题】：How to style ng-content如何设置 ng-content 的样式
【发布时间】：2017-04-26 16:42:28
【问题描述】：

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

如果前面有 /deep/ 关键字，我似乎只能定位 css 中的那些元素，该关键字通常在定位嵌套组件时使用。它是否正确？

【问题讨论】：

【解决方案1】：

更新

现在所有新浏览器都支持::slotted，并且可以与ViewEncapsulation.ShadowDom一起使用

原创

::content xxx { ... } 或:host xxx { ... } 也可以。匀场不是很严格或准确。 AFAIK (>>> /deep/ old) ::ng-deep（由 SASS 支持）和空间目前也是如此。

【讨论】：

出于某种原因，我认为我需要 >>> 或 /deep/ 但它只适用于 :host xxx {...}
实际上，忽略之前的评论，我仍然无法让它工作，除非我包含 /deep/ 这样的 :host /deep/ xxx {...} 。是否需要开启某种设置？
这也是一种有效的方式。
@Cody 我不明白你的评论。这些 CSS 组合器来自 WebComponents 规范。
嗨@trichetriche ::content。这适用于 Angular 模拟的“影子 DOM”（如果最近没有任何变化 - 不要密切关注 Angular - 检查 Angular 存储库中的 CHANGELOG.md）

【解决方案2】：

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

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

1。只写 CSS

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

app-sidebar p {
  color:red;
}

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

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

将它们放在一起，您可以选择嵌套在宿主组件元素中的所有元素，无论它们在哪里声明。

像这样：

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

【讨论】：

选项 2 在我看来是最好的答案，但是现在应该更新它以使用 ::ng-deep, as explained here in the angular documentation: The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
现在所有的“深度”选择器都已经被贬值了。
@Fill - 我知道，我仍在寻找可行的替代方案。
@superluminary 嗯嗯嗯...恐怕这里只有 2 个解决方案：在每个组件内部使用 :host & :host-context 类，并根据其周围环境设置组件样式（最好是它解耦组件）或使用主要的styles.css / style.scss文件 - 样式全局应用并影响甚至最深的组件（根本不需要：deep）希望这会有所帮助;-)
@fill - 很有趣。按钮是一个超级便携的元素，因为它具有样式，但您可以从外部覆盖该样式。同样是一个下拉菜单。我仍在努力了解如何阻止消费者对组件进行样式化，从而使该组件更便携。

【解决方案3】：

这解决了我的问题

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

【讨论】：

【解决方案4】：

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

【讨论】：