4

我有一个 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]

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

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

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

请问我该怎么做？

4

2 回答 2

3

我自己想通了。这就是我一直在寻找的：

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

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

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

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

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

于 2016-09-17T15:20:55.007 回答
0

你需要：

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

代替：

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

如果你去检查你的结构，alert 标签有这个ngcontent...属性，而不是他的 div 孩子有alert class。

于 2016-09-17T14:13:45.007 回答