CSS Angular2-如何将CSS应用于一个组件内的嵌套元素？

Question

我与HTML一个角度成分如下：

<!-- dynamic content generated runtime --> 
<div class="test"> 
     <div class="testinside"> 
     HELLO 
     </div> 
    </div> 

现在我想要的风格为[生成动态内容]部分一类，所以我SCSS如下：

:host { 

    display: inline-block; 
    vertical-align: middle; 

    > .test > .testinside { 
    color: red; 
    } 

    > select { 
    display: inline; 
    } 

    > .combobox-container > .input-group { 
    color: red; 
    } 
} 

[.combobox-container> .input-group]是动态内容的css设置。

然而，似乎对动态内容的CSS不受影响:(（静态内容的CSS是OK）

的动态内容如下：

<common-combobox _ngcontent-hdj-67="" ...> 
<!-- dynamic content generated runtime --> 
    <div class="combobox-container combobox-selected"> 
    <input type="hidden" name="" value="2"> 
    <div class="input-group"> 
     <input type="text" autocomplete="off" placeholder="Anrede" class="combobox"> 
     <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span> 
    </div> 
    </div> 

    <div _ngcontent-hdj-35="" class="test"> 
    <div _ngcontent-hdj-35="" class="testinside"> 
     HELLO 
    </div> 
    </div> 
</common-combobox> 

谁能帮助我展现点我错过了吗？

Answer 1

使用:host /deep/强制子组件使用样式

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

这里是角Live example，看到hero-detail.component.css

---

更新从@Joseph布里格斯

阴影刺穿后裔组合子已被弃用，支持正在从主流浏览器和工具中删除。因此，我们计划放弃对Angular的支持（所有3个/ deep /，>>>和:: ng-deep）。在此之前:: ng-deep应该更适合与工具的更广泛的兼容性。

总之，::ng-deep将取代:host /deep/，直到下一次通知来自Angular。

Answer 2

设置viewEncapsulation该组件None。