Применить css в компоненте, который использует библиотеку js

Question

в моем приложении Я использую этот library, чтобы пользователь мог выбрать дату.

Я завернут, что самозагрузки-виджет в компоненте, как это:

@Component({ 
    selector: 'date-picker', 
    template: '<input type="text" class="form-control" id="{{id}}" />', 
    styles: [` 
     .test { 
      background-color: green; 
     } 
    `], 
}) 
export class DatePickerComponent implements OnInit, OnChanges { 
    public id: string; 

    @Input() public date: Date; 
    @Input() public disabled: boolean; 

    public ngOnInit() { 
     this.id = 'dp-' + new Date().getTime(); 
     window.setTimeout(() => this.initializeDatePicker()); 
    } 

    public ngOnChanges(changes: any) { 
     if (!this.pickerFunctions) 
      return; 

     var typedChanges = <DatePickerComponent>changes; 
     if (typedChanges.disabled) 
      this.setPickerDisabled(this.disabled); 
     if (typedChanges.date) 
      this.setPickerDate(this.date); 
    } 

    private initializeDatePicker() { 
     var element = jQuery('#' + this.id); 
     (<any>element).datetimepicker(); 
     element.on('dp.change', (e: any) => this.date = e.date.toDate()); 

     this.setPickerDate(this.date); 
     this.setPickerDisabled(this.disabled); 
    } 

    private setPickerDate(date: Date) { 
     this.pickerFunctions.date(date ? date : null); 
    } 

    private setPickerDisabled(disabled: boolean) { 
     if (disabled) 
      this.pickerFunctions.disable(); 
     else 
      this.pickerFunctions.enable(); 
    } 

    private get pickerFunctions(): any { 
     var element = jQuery('#' + this.id); 
     return element.data("DateTimePicker"); 
    } 
} 

Проблема заключается в том, что стилей: [ «»] из компонента атрибутов не применяются.

Знаете ли вы, почему?

Я попытался импортировать файл css, и таким образом он работает, но я хочу использовать атрибут style, чтобы сделать компонент полностью многоразовым.

Большое спасибо

PS: Странно также, что CSS библиотеки не применяется .. Я импортировать его правильно

<link href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 

Answer 1

Я думаю, что это должно работать:

:host >>> .test { 
     background-color: green; 
    } 

CSS не применяется, потому что ваш динамически добавленный HTML не использует классы, используемые угловым использованием для эмуляции инкапсуляции стиля. Использование «теневого пирсинга» комбинатора CSS должно обойти его.