目前我正在开发搜索输入组件。该组件在我的应用程序的多个区域中使用。
组件有' @输入'用于定义输入HTML元素的bgColor和颜色。
我使用占位符来寻求帮助信息。对于定义placholder颜色和我需要的其他CSS属性:: - webkit-input-placeholder property。
问题出在这里,当我尝试将占位符的颜色定义为输入的相同颜色时(保存在' @input inputColor'属性中)。
@Component({
selector: 'app-search-input-component',
templateUrl: './search-input.component.html',
styleUrls: ['./search-input.component.less'],
styles: [
'input::-webkit-input-placeholder{ color: ' + this.inputColor + ' }' //I try this but is undefined :(
],
host: {
'[style.display]' : "'flex'"
}
})
export class SearchInputComponent implements OnInit {
@Input()
public placeholder: string = "Search model or manufacturer ...";
@Input()
public inputColor: string = '#ffffff'; // I need apply to placeholder this color
@Input()
public inputBgColor: string = 'rgba(255, 255, 255, 0)';
@Input()
public inputPadding: string = '10px';
@Input()
public inputBorder: string = '1px solid #ffffff';
非常感谢您的所有时间! Tarik Curto