Question

最近，我试图修改课程＆＃34; carousel-item＆＃34;在ng-bootstrap轮播组件内。但是，我发现我需要添加＆＃34;封装：ViewEncapsulation.None＆＃34;在元数据中。使用此解决方案还将更改另一个轮播组件上的css。是否还有其他解决方案来修改ng-bootstrap轮播组件中的css类。

这是我的代码：

我的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() { }
}

我的观看＆＃34; carousel.component.html＆＃34;：

<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>

我的样式表＆＃34; carousel.component.scss＆＃34;：

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

Answer 1

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

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

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

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

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

  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

1 个答案: