如何将 CSS 样式传递给我的 Angular 2 组件？

Question

我构建了一个 Angular2/4 组件，基本上是一个屏蔽的日期输入。我用它代替文本框输入，并在它后面有一些代码来处理日期转换。它工作得很好，但现在我想应用 CSS 样式并让它改变输入。

我想写 <app-date-input class='someCssClass'></app-date-input> 并且 class 归因于我的内部输入。

我的组件代码如下：

日期-input.component.html

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DatePipe } from "@angular/common";
import * as moment from 'moment';

日期-input.component.ts

import { AppConstantsService } from "../../_services";

@Component({
    selector: 'app-date-input',
    templateUrl: './date-input.component.html',
    styleUrls: ['./date-input.component.css'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DateInputComponent),
        multi: true
    }]
})
export class DateInputComponent implements ControlValueAccessor {
    @Input()
    public valor: Date;

    @Input()
    public readonly: boolean;

    public dataString: string;

    constructor(public appConstants: AppConstantsService) {
    }

    atribuirData(dataEntrada: string) {
        if (!dataEntrada || dataEntrada == '') {
            this.valor = null;
            this.propagateChange(this.valor);
            return;
        }

        let parts = dataEntrada.split('/');

        try {
            let newDate = moment(parts[2] + '-' + parts[1] + '-' + parts[0]).toDate();
            // let newDate = new Date(+parts[2], +parts[1]-1, +parts[0]);

            this.valor = newDate;
            this.propagateChange(this.valor);
        } catch (error) {
            // return dataEntrada;
            console.log(error);
        }
    }

    writeValue(value: any) {
        this.valor = value;
        const datePipe = new DatePipe('pt-BR');
        this.dataString = datePipe.transform(this.valor, 'dd/MM/yyyy');
    }

    propagateChange = (_: any) => { };

    registerOnChange(fn) {
        this.propagateChange = fn;
    }

    registerOnTouched() {
    }
}

Answer 1

尽管有多种方法可以实现这一点

在子组件中设置样式

<app-date-input [childClass]='someCssClass'></app-date-input>

现在在 DateInputComponent 中，创建一个 @Input() 属性并在组件的 HTML 中，您可以执行类似

的操作

'<input [class]="input Variable Name">'

如何将 CSS 样式传递给我的 Angular 2 组件？

How to pass CSS styles to my Angular 2 component?

css

angular2-forms