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

Question

我有一个带有 html 的 Angular 组件，如下所示:

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

现在我想在 [dynamic content generated] 部分为一个类设置样式，所以我的 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-

这里是 Live example来自 Angular，请参阅 hero-detail.component.css

---

来自@Joseph Briggs 的更新

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

简而言之，::ng-deep 将替换 :host/deep/，直到 Angular 发出下一次通知。