Как обращаться к классам в компоненте ng-bootstrap?

Я хочу добавить стиль CSS в NgbProgressbar, и у меня возникают проблемы с этим. В частности, я хочу придать собственный цвет индикатору выполнения. Использование демонстрации «Контекстные индикаторы выполнения» на https://ng-bootstrap.github.io/#/components/progressbar, код файла src/progressbar-basic.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'ngbd-progressbar-basic',
    templateUrl: 'src/progressbar-basic.html',
    styles: [`
        ngb-progressbar {
            margin-top: 5rem;
        }
    `]
})
export class NgbdProgressbarBasic {
}

При проверке компонентов в браузере стиль background-color для индикатора выполнения контролируется .bg-success и .progress-bar. Добавление

.progress-bar {
    background-color:#ff9900;
}

в файл css, прикрепленный к файлу index.html, вносит желаемое изменение, но я пытаюсь добавить его только здесь, а не глобально.

Добавление его, как это сделано для стиля ngb-progressbar margin-top выше, похоже, не работает, хотя я также не вижу никакого эффекта от стиля margin-top. Я отключил операторы типа type="success" в progressbar-basic.html, чтобы они не конфликтовали.

Как можно изменить приведенный выше код progressbar-basic.ts, чтобы прикрепить стиль к индикатору выполнения внутри NgbProgressbar?


ng-bootstrap
person Mickey Segal    schedule 14.04.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Этот вопрос больше связан с тем, как инкапсуляция стилей работает в Angular, а не с чем-то конкретным для ng-bootstrap, но краткий ответ заключается в том, что в инкапсуляции стиля по умолчанию (из https://angular.io/docs/ts/latest/guide/component-styles.html):

Стили компонентов обычно применяются только к HTML в собственном шаблоне компонента.

Поскольку ngb-progressbar не является частью компонент HTML (это совсем другой компонент), вы должны заставить стили распространяться вниз по структуре компонентов:

Используйте селектор /deep/, чтобы применить стиль вниз по дереву дочерних компонентов во все представления дочерних компонентов. Селектор /deep/ работает с любой глубиной вложенности компонентов и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента.

Перевод этого на вашу конкретную проблему будет означать, что вы должны написать:

  styles: [`
    /deep/ div.bg-success {
      background-color: #ff9900!important; 
    }
  `]

Вот живой пример в плункере: http://plnkr.co/edit/DwBZ0Lr55onprz8bEcKI?p=preview

Предупреждение: хотя вышеизложенное работает, я бы предпочел создать новый тип индикатора выполнения в вашем CSS и использовать его тип в качестве аргумента для ввода ngb-progressbar type. Это даст вам возможность правильно назвать новую концепцию, которую вы пытаетесь выразить здесь.

person pkozlowski.opensource    schedule 14.04.2017
comment
Я вижу, что /deep/div.progress-bar тоже работает. Я изучу стили компонентов, чтобы лучше понять этот материал. Спасибо, что указали мне правильное направление. - person Mickey Segal; 14.04.2017