如何处理 ng-bootstrap 组件中的类？

Question

我想向 NgbProgressbar 添加一个 css 样式，但我在这样做时遇到了麻烦。具体来说，我想给进度条一个自定义颜色。使用https://ng-bootstrap.github.io/#/components/progressbar 的“上下文进度条”演示，src/progressbar-basic.ts 文件的代码为：

import {Component} from '@angular/core';

@Component({
    selector: 'ngbd-progressbar-basic',
    templateUrl: 'src/progressbar-basic.html',
    styles: [`
        ngb-progressbar {
            margin-top: 5rem;
        }
    `]
})
export class NgbdProgressbarBasic {
} 

在浏览器中检查组件，进度条的背景颜色样式由 .bg-success 和 .progress-bar 控制。添加

.progress-bar {
    background-color:#ff9900;
}

对附加到 index.html 文件的 css 文件进行了所需的更改，但我试图仅在此处添加它，而不是全局添加。

按照上面的 ngb-progressbar margin-top 样式添加它似乎不起作用，尽管我也没有看到 margin-top 样式的任何效果。我已经关闭了 progressbar-basic.html 中的 type="success" 类型语句，以防止它们发生冲突。

如何修改上面的 progressbar-basic.ts 代码以将样式附加到 NgbProgressbar 内的进度条？

Answer 1

这个问题更多地与样式封装在 Angular 中的工作方式有关，而不是特定于 ng-bootstrap，但简短的回答是在默认样式封装中（来自 https://angular.io/docs/ts/latest/guide/component-styles.html）：

组件样式通常只适用于组件的 HTML 自己的模板

由于ngb-progressbar 不是组件 HTML 的一部分（它完全是一个不同的组件），您必须强制样式沿组件结构向下传播：

使用 /deep/ 选择器将样式强制向下通过子元素 组件树到所有子组件视图中。 /deep/ 选择器 适用于任何深度的嵌套组件，它适用于 查看组件的子项和内容子项

把它翻译成你的特定问题意味着你应该写：

  styles: [`
    /deep/ div.bg-success {
      background-color: #ff9900!important; 
    }
  `]

这是一个 plunker 中的实时示例：http://plnkr.co/edit/DwBZ0Lr55onprz8bEcKI?p=preview

警告：虽然上述方法有效，但我宁愿在您的 CSS 中创建一个新的进度条 type 并将其用作 ngb-progressbar type 输入的参数。这将使您有机会正确地命名您试图在这里表达的新概念。