jsライブラリを使用するコンポーネントでCSSを適用する

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ファイルをインポートしようとしましたが、このように動作しますが、コンポーネントを完全に再利用できるようにするためにスタイル属性を使用します。

おかげでたくさん

PS：それは、ライブラリのCSSが適用されないことも奇妙である..私は、私は、これは動作するはずだと思う正しく

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

Answer 1

それをインポートしています：

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

ダイナミックに追加されたHTMLにクラスが適用されていないため、スタイルのカプセル化をエミュレートするために角度を使用するため、CSSは適用されません。 「シャドーピアシング」CSSコンビネータを使用すると、それを回避できます。