如何使用 Angular 2 修改 ng-bootstrap 轮播的 CSS

Question

最近尝试修改ng-bootstrap轮播组件中的class"carousel-item"。但是，我发现我需要在元数据中添加 "encapsulation: ViewEncapsulation.None" 。使用此解决方案还会更改其他轮播组件上的 css。是否有任何其他解决方案来修改 ng-bootstrap 轮播组件中的 css class。

这是我的代码：

我的 ts 文件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  moduleId: module.id,
  selector: 'carousel',
  templateUrl: 'carousel.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls : ['./carousel.component.scss'],
  providers: [NgbCarouselConfig]
})

export class CarouselComponent implements OnInit {
  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10;
    config.wrap = false;
    config.keyboard = false;
  }

  ngOnInit() { }
}

我的观点"carousel.component.html":

<ngb-carousel>
  <template ngbSlide>
    <img src="http://lorempixel.com/900/500?r=4" alt="Random first slide">
    <div class="carousel-caption">
      <h3>10 seconds between slides...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </template>
</ngb-carousel>

还有我的风格sheet"carousel.component.scss":

  .carousel-item.active{
    display:inline;
    img{
      width: 100%;
    }
  }

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-carousel 不是组件的一部分 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/ .carousel-item.active {
        border: solid 0.3em;
        border-color: red;
     }
  `]

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

如何使用 Angular 2 修改 ng-bootstrap 轮播的 CSS

How modify CSS of ng-bootstrap carousel using Angular 2

ng-bootstrap

angular