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属性？

也许我做错了。我想要实现的是自定义我自定义组件（{{{}中的ng2-bootrap库（https://github.com/valor-software/ng2-bootstrap）提供的单个引导程序组件（上面代码中的<alert>）的CSS。 1}}在上面的代码中。

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

我该怎么办呢？

Answer 1

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

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

以上代码将产生以下内容：

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

这样我可以修改组件<home>内部的引导类（在本例中为.alert）的默认样式。

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

Answer 2

你需要：

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

而不是：

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

如果你去检查你的结构，警告标记有ngcontent...属性，不他的div孩子有提醒等级

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

2 个答案: