Question

在我的应用程序中我正在使用此library以便让用户选择日期。

我将这个bootstrap-widget包装在这样的Component中：

@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没有应用Angular类来模拟样式封装。使用＆＃34;阴影穿孔＆＃34; CSS组合器应该解决它。

在使用js库的组件中应用css

1 个答案: