如何在模拟视图封装中获取全局选择器（CSS / Angular2）

Question

我有一个 Home 组件，里面有这个：

<alert type="info">Hello from ng2-bootstrap</alert>

在我的 home.style.scss 里面，我有这个：

:host .alert {
  background-color: green;
}

应该将背景颜色更改为绿色，但它没有。

上面的css代码会产生这种风格：

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3] {
  background-color: green;
}

最后的 HTML 看起来像这样：

<home _nghost-wjn-3="">
  <div _ngcontent-wjn-3="" class="card-container">
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
      <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
        Hello from ng2-bootstrap  Sat Sep 17 2016
      </div>
    </alert>
  </div>
</home>

我不知道这里有什么问题，但我认为选择器是错误的。我希望最终选择器是：

[_nghost-wjn-3]   .alert

而不是：

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3]

或者换句话说，为什么 <div class="alert">...</div> 上没有 _ngcontent-wjn-3 属性？

也许我整件事都做错了。我想要实现的是自定义单个 bootstrap 组件的 CSS（上面代码中的 <alert>），由 ng2-bootrap 库（https://github.com/valor-software/ng2-bootstrap ) 在我的自定义组件中（上面代码中的<home>）。

我在主页组件中使用默认视图封装（模拟）。

请问我该怎么做？

Answer 1

你需要：

[_nghost-wjn-3] alert[_ngcontent-wjn-3]

而不是：

[_nghost-wjn-3] .alert[_ngcontent-wjn-3]

如果你去检查你的结构，警报标签有ngcontent...属性，没有他的div child 警报 class.

Answer 2

我自己想出来了。这就是我要找的：

:host /deep/ .alert {
  background-color: green;
}

以上代码将产生以下结果：

[_nghost-wjn-3] .alert {
  background-color: green;
}

这样我就可以在我的组件 <home>.

中修改 bootstrap class（.alert，在本例中）的默认样式

来源：https://angular.io/docs/ts/latest/guide/component-styles.html

如何在模拟视图封装中获取全局选择器（CSS / Angular2）

How to get global selector inside emulated view encapsulation (CSS / Angular2)

css

ng2-bootstrap

angular2viewencapsulation

angular