angular2组件投影（ng-content）样式

         在前面的问题汇总的第四个里，介绍过angular2的组件投影，也就是我们在使用组件的时候，父组件可以用属性把一些数据传到子组件内部，但是一写DOM结构我们没法再通过参数传值，这时候我们用到了ng-content来将父组件的内容投影到子组件的标签内。这时候问题出现了，很多时候要实现我们子组件的功能可能需要对投影过来的DOM结构加一些样式。

         比如在写一个轮播图的组件时，组件内部的内容可能是图片，可能是内容，可能是视频，但是这些轮播的内容需要我们加一些特定的样式才能实现基本的功能，比如加定位，浮动这些。这样这些样式加在父组件里显然不合适，在别人使用组件的时候不会给你写上这些在父组件里用不到的样式，这样的话组件的公用性也不强。

          这时候就需要我们在写组件的时候就把这些样式加上，可是在写上这些样式的时候发现不起作用。因为组件样式的作用域限定非常窄，仅限组件自身使用而已。

          组件样式有几个特殊的选择器是来自影子DOM（Shadow DOM）作用域的。

         1.    :host选择器   是对父元素里引用子组件的标签有效，如我们实现组件my-slide

父组件引用

//content.......

子组件样式

：host {

        border： 10px solid red;

}

那么在使用的时候我们看到的最终样式是如下

:host-context也有同样功能，通过> 空格等子元素选择器就能找到我们组件里的DOM元素进行设置。

   2.就像前面说的，有时候我们需要加的样式是给投影进来的DOM加样式，这样的话还是不起作用，那么用到深层穿透的样式选择器

/deep/   如果.item是投影进来的，那么

：host   .item{}

是不起作用的，用到这个选择器

：host  /deep/  .item{}

这样就可以了。 /deep/的另一种使用方式是 >>> 即

：host  >>>  .item {}

参考文档：

Angular2组件样式及host

angular-ng-content

Component Style Isolation & ng-content in Angular 2+