小编Vin*_* Ho的帖子

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

最近,我试图修改ng-bootstrap轮播组件中的"carousel-item"类.但是,我发现我需要在元数据中添加"encapsulation:ViewEncapsulation.None".使用此解决方案还将更改另一个轮播组件上的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() { }
}
Run Code Online (Sandbox Code Playgroud)

我的视图"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 …
Run Code Online (Sandbox Code Playgroud)

ng-bootstrap angular

4
推荐指数
1
解决办法
6920
查看次数

标签 统计

angular ×1

ng-bootstrap ×1