Angular 2コンポーネントにCSSスタイルを渡すにはどうすればいいですか？

Question

私は基本的にマスクされた日付入力であるAngular2/4コンポーネントを構築しました。私はそれをテキストボックス入力の代わりに使用し、日付変換を処理するためのコードをいくつか持っています。それは十分に機能するが、今はCSSスタイルを適用して入力を変更したい。

私は<app-date-input class='someCssClass'></app-date-input>と書いておきたいと思います。そのクラスは私の内部入力に帰属します。

成分のための私のコードは次の

日付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

があるもののこれを達成するための複数の方法

1. @Input（）プロパティを作成し、子コンポーネントDateInputComponentで今

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

のスタイルを設定すると、コンポーネントのHTMLで、あなたは

ような何かを行うことができます

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