最近,我试图修改课程" carousel-item"在ng-bootstrap轮播组件内。但是,我发现我需要添加"封装: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() { }
}
我的观看" 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>
我的样式表&#34; carousel.component.scss&#34;:
.carousel-item.active{
display:inline;
img{
width: 100%;
}
}
答案 0 :(得分:6)
这个问题更多地与样式封装在Angular中的工作方式有关,而不是ng-bootstrap特有的,但简短的答案是在默认样式封装中(来自https://angular.io/docs/ts/latest/guide/component-styles.html):
组件样式通常仅适用于组件中的HTML 自己的模板
由于ngb-carousel 不是组件HTML的一部分(它完全是一个不同的组件),您必须强制样式向下传播组件结构:
使用/ deep / selector强制样式向下穿过子项 组件树到所有子组件视图中。 / deep /选择器 适用于任何深度的嵌套组件,它适用于两者 查看组件的子项和内容子项
将此翻译为您的特定问题意味着您应该写:
styles: [`
/deep/ .carousel-item.active {
border: solid 0.3em;
border-color: red;
}
`]
这是一个关于plunker的实例:http://plnkr.co/edit/7J3CItUtSua1zJ7GG1xH?p=preview