最近,我试图修改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)