css - 如何在模拟 View 封装内获取全局选择器(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属性？ ？

也许我做错了整件事。我想要实现的是在我的自定义组件(代码中的 <alert>)中自定义由 ng2-bootrap 库(https://github.com/valor-software/ng2-bootstrap)提供的各个引导组件(上面代码中的 <home>)的 CSS以上)。

我在 home 组件中使用默认 View 封装(模拟)。

请问我该怎么做？

Answer 1

我自己想通了。这就是我要找的:

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

上面的代码会产生以下结果:

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

通过这种方式，我可以在我的组件内修改 Bootstrap 类(在本例中为 .alert)的默认样式 <home> .

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