采用了棱角分明2

最近，我试图修改类“旋转木马项目” NG-引导旋转木马组件内部如何修改NG-引导传送带的CSS。但是，我发现我需要在元数据中添加“封装：ViewEncapsulation.None”。使用这个解决方案也会改变另一个轮播组件上的css。是否有任何其他解决方案来修改ng-bootstrap carousel组件内的css类。采用了棱角分明2

这里是我的代码：

我的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>

而且我的样式表“carousel.component。 scss“：

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

来源

2017-04-25 Vincent Ho

This que Stion的更多的是使用样式封装的角度如何工作，而不是具体到ng-bootstrap东西，但简单的答案是，在默认样式封装（从https://angular.io/docs/ts/latest/guide/component-styles.html）：

组件样式通常只适用于HTML中组件的自己的模板

由于ngb-carousel是组件的HTML（这是一个不同的组件完全），你必须强迫风格传播下来的部件结构的不部分：

使用/深/选择器，通过孩子组件树强制风格下到所有的子组件意见。该/深/选择作品嵌套组件的任何深度，并且它适用于儿童观和组件

翻译给你的特定问题的内容孩子都将意味着你应该写：

styles: [` 
    /deep/ .carousel-item.active { 
     border: solid 0.3em; 
     border-color: red; 
    } 
    `]

这里是在plunker一个活生生的例子：http://plnkr.co/edit/7J3CItUtSua1zJ7GG1xH?p=preview

来源

2017-04-25 16:04:02

它的工作原理！非常感谢你！！ –

/deep/selector现在已弃用，有其他选择吗？ – magnattic

采用了棱角分明2

回答

相关问题