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可以）

动态内容如下：

<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-

这是Angular的Live示例，请参见hero-detail.component.css

@Joseph Briggs的更新

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

简而言之，::ng-deep将替换:host /deep/为Angular的下一个通知。