如何设置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。你可以写：

app-sidebar p {
  color:red;
}

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

2。使用：host / deep / selector

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

• :host将选择该元素。
• /deep/将选择元素而不将模拟影子DOM属性选择器添加到嵌套选择器。

将它们组合在一起，您可以选择嵌套在主机组件元素中的所有元素，无论它们在何处被声明。

像这样：

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

Answer 2

<强>更新

所有新浏览器现在都支持

::slotted，并且可以与`ViewEncapsulation.ShadowDom

一起使用

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

<强>原始

::content xxx { ... }也可以正常工作或:host xxx { ... }。垫片不是非常严格或准确。 AFAIK（>>> /deep/旧）::ng-deep（由SASS支持）和空格目前相同。

Answer 3

这解决了我的问题

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

Answer 4

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