Question

我正在尝试使用内联css设置<ng-content>样式，但似乎样式不适用于ng-content，我还需要为样式做些其他事情？

<ng-content class="red"></ng-content> <p class="red">hello</p>

这里的班级红色适用于p但不适用于

Working Example

Answer 1

::content被忽略。

关闭

您可以使用::content选择器

styles: ['.red {color:red} :host >>> upper {color:green}']

或

styles: ['.red {color:red} :host >>> * {color:green}']

如果有LESS用户，似乎LESS编译器不喜欢 >>>语法，因此您需要为其添加别名，例如。 @deep: ~">>>";然后使用@{deep} { /* your deep styles here */ }

另见此讨论https://github.com/angular/angular/issues/7400#issuecomment-246922468

<击> 您可以使用::content选择器

styles: ['.red {color:red} ::content >>> upper {color:green}']

或

styles: ['.red {color:red} ::content >>> * {color:green}']

<击>

根据网络组件规范::content应该足够了，不应该要求>>>，但没有它就不应用样式。

Plunker example

Answer 2

事实上，它因为被输入内容所取代。该元素不存在于内存中。

关于您的样本，使用upper时：

<upper>Some text</upper>

具有以下模板：

<ng-content class="red"></ng-content> <p class="red">hello</p>

你将在DOM中拥有它：

<upper _nghost-dks-2="">
  Some text <p _ngcontent-dks-2="" class="red">hello</p>
</upper>

因此，您无法在class="red"上使用ng-content。

Answer 3

尝试将css添加到父css文件中：app/src/style.css

不到您的组件的styleUrls的css文件中（您在此组件中包含了styleUrls: ['design.css']）

Answer 4

只需包装ng-content并使用css在其中选择？

<div class="red"><ng-content></ng-content></div>

CSS：

.red > * {
    color: red;
}

angular2中的<ng-content>自定义样式不起作用？

4 个答案: