Recientemente, intenté modificar la clase "elemento de carrusel" dentro del componente de carrusel ng-bootstrap. Sin embargo, descubrí que necesito agregar "encapsulación: ViewEncapsulation.None" en los metadatos. El uso de esta solución también cambiaría el css en el otro componente del carrusel. ¿Hay alguna otra solución para modificar la clase css dentro del componente carrusel ng-bootstrap?

Aquí está mi código:

mi archivo 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() { } }

mi Vista "carrusel.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>

Y mi hoja de estilo "carousel.component.scss":

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