採用了棱角分明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

回答

相關問題