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＆gt; .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 example，请参阅hero-detail.component.css

来自@Joseph Briggs的更新

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于/ deep /，＆gt;＆gt;＆gt;和:: ng-deep的所有3个）。在此之前，应该首选:: ng-deep，以便与工具实现更广泛的兼容性。

简而言之，::ng-deep将取代:host /deep/，直到Angular的下一个通知为止。

Answer 2

将该组件的viewEncapsulation设置为None。

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

2 个答案: