如何设置ng-content的样式

Question

我正在遵循本教程中的转换https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

但是,没有提到如何设置最终替换ng-content的元素.

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

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

如果要使用阴影DOM polyfill并使用装饰器的styleor styleUrls属性设置组件样式Component,请选择元素:host,然后忽略带有/deep/子选择器的阴影DOM polyfill .

• :host 将选择元素.
• /deep/ 将在不将mock shadow 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
    }
}