我正在尝试制作可以重新使用和可配置的组件。
在这个例子中,我使用输入字段和属性绑定它的一些值以及我自己的一些自定义配置。
模板
<div class="form-group {{this.bootstrapClass}} label-floating">
<label for="{{this.inputid}}">{{this.label}} <span *ngIf="this.required === 'true'" class="required-error">*</span></label>
<input (focus)="infocus($event)" (blur)="outfocus($event)" class="form-control" id="{{this.inputid}}" placeholder="{{this.placeholder}}" type="text" disabled="{{this.disabled}}" value="{{this.placeholder}}" required="{{this.required}}">
<small class="required-error validate" *ngIf="this.valid ==='false'">{{this.errorMessage}}</small>
</div>
.TS
import { Component, Input, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'sti-string-input',
templateUrl: './string-input.component.html',
styleUrls: ['./string-input.component.scss']
})
export class StringInputComponent implements OnInit {
valid = 'false';
errorMessage = 'Error description goes here.';
@ViewChild(StringInputComponent) child: StringInputComponent;
@Input('inputid') inputid: string;
@Input('label') label: string;
@Input('bootstrapClass') bootstrapClass: string;
@Input('placeholder') placeholder: string;
@Input('disabled') disabled: boolean;
@Input('required') required: boolean;
constructor() { }
ngOnInit() {
}
infocus(event) {
event.target.parentNode.classList.add('is-focused');
}
outfocus(event) {
event.target.parentNode.classList.remove('is-focused');
}
}
问题
当我尝试使用 @Input 来绑定输入字段类型的属性时,我得到一个错误。标签,占位符工作得很好,这个属性有什么不同?