如何使用Angular 2修改ng-bootstrap轮播的CSS [英] How modify CSS of ng-bootstrap carousel using Angular 2

问题描述

最近，我尝试修改ng-bootstrap轮播组件中的类"carousel-item".但是，我发现我需要在元数据中添加封装:ViewEncapsulation.None".使用此解决方案还将更改其他轮播组件上的css.还有其他解决方案可以修改ng-bootstrap轮播组件中的css类.

recently, I have tried to modify the class "carousel-item" inside ng-bootstrap carousel component. However, I found that I need to add "encapsulation: ViewEncapsulation.None" in the metadata. Using this solution would also change the css on the other carousel component. Is there any other solution to modified the css class inside ng-bootstrap carousel component.

这是我的代码:

我的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":

my View "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>

我的样式表"carousel.component.scss":

And my style sheet "carousel.component.scss":

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

推荐答案

此问题更多地与Angular中样式封装的工作方式有关，而不是

This question has more to do with how styles encapsulation work in Angular rather than something specific to ng-bootstrap, but the short answer is that in the default style encapsulation (from https://angular.io/docs/ts/latest/guide/component-styles.html):

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

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

由于 ngb-carousel 是 not 的一部分组件HTML(完全是一个不同的组件)，您必须强制样式向下传播到组件结构:

Since ngb-carousel is not part of the component HTML (it is a different component altogether) you have to force styles to propagate down the components structure:

使用/deep/选择器将样式向下强制通过子项 组件树进入所有子组件视图. /deep/选择器 适用于任何深度的嵌套组件，并且适用于 查看组件的子级和内容子级

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

将此转换为您的特定问题将意味着您应该编写:

Translating this to your particular problem would mean that you should write:

  styles: [`
     /deep/ .carousel-item.active {
        border: solid 0.3em;
        border-color: red;
     }
  `]

这是一个示例程序: http://plnkr.co/edit/7J3CItUtSua1zJ7GG1xH ?p =预览

这篇关于如何使用Angular 2修改ng-bootstrap轮播的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！