Question

我想在NgbProgressbar中添加一个css样式，但我却遇到了麻烦。具体来说，我想为进度条提供自定义颜色。使用＆＃34;上下文进度条＆＃34;在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风格添加它似乎不起作用，但我也看不到保证金顶级风格的任何影响。我已经关闭了类型=＆＃34;成功＆＃34;在progressbar-basic.html中键入语句以防止它们发生冲突。

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

Answer 1

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

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

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

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

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

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

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

警告：在上述工作中，我宁愿在CSS中创建一个新的类型进度条，并使用它作为ngb-progressbar type输入的参数。这将使您有机会正确地命名您想在此处表达的新概念。

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

1 个答案: