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

Question

我想向 NgbProgressbar 添加 css 样式，但我在这样做时遇到了问题。具体来说，我想为进度条提供自定义颜色。在 https://ng-bootstrap.github.io/#/components/progressbar 使用 "Contextual progress bars" 演示，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, but the short answer is that in the default style encapsulation (from https://angular.io/docs/ts/latest/guide/component-styles.html 的问题）：

Component styles normally apply only to the HTML in the component's own template

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

Use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies to both the view children and content children of the component

将此翻译成您的特定问题意味着您应该这样写：

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

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

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

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

How to address classes within an ng-bootstrap component?

ng-bootstrap

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