Apply css in der Komponente, die js-Bibliothek verwendet

Question

in meiner Anwendung verwende ich diese library, damit der Benutzer ein Datum auswählen kann.

wickelte ich das Bootstrap-Widget in einer Komponente wie folgt aus:

@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"); 
    } 
} 

Das Problem ist, dass die Stile: [ ''] der Component nicht angewendet wird Attribute.

Wissen Sie warum?

Ich habe versucht, eine CSS-Datei zu importieren und auf diese Weise funktioniert es, aber ich möchte das Stil-Attribut verwenden, um die Komponente vollständig wiederverwendbar zu machen.

Vielen Dank

PS: es ist seltsam, dass die CSS der Bibliothek nicht angewendet wird .. Ich bin Import es richtig

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

Answer 1

ich denke, das sollte funktionieren:

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

Das CSS wird nicht angewendet, da für das dynamisch hinzugefügte HTML keine Klassen angewendet werden. Angular verwendet die Stilkapselung. Mit dem "Shadow Piercing" CSS-Kombinator sollte es umgehen.