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%; } }Esta pregunta tiene más que ver con cómo funciona la encapsulación de estilos en Angular en lugar de algo específico de ng-bootstrap , pero la respuesta corta es que en la encapsulación de estilo predeterminada (de https://angular.io/docs/ts/latest/guide /component-styles.html ):
Los estilos de componente normalmente se aplican solo al HTML en la propia plantilla del componente.
Dado que ngb-carousel no es parte del componente HTML (es un componente completamente diferente), debe forzar los estilos para que se propaguen hacia abajo en la estructura de los componentes:
Use el selector /profundo/ para forzar un estilo hacia abajo a través del árbol de componentes secundarios en todas las vistas de componentes secundarios. El selector /profundo/ funciona en cualquier profundidad de los componentes anidados y se aplica tanto a los elementos secundarios de vista como a los elementos secundarios de contenido del componente.
Traducir esto a su problema particular significaría que debe escribir:
styles: [` /deep/ .carousel-item.active { border: solid 0.3em; border-color: red; } `]Aquí hay un ejemplo en vivo en un plunker: http://plnkr.co/edit/7J3CItUtSua1zJ7GG1xH?p=preview