Question

目前我正在开发搜索输入组件。该组件在我的应用程序的多个区域中使用。

组件有＆＃39; @输入＆＃39;用于定义输入HTML元素的bgColor和颜色。

我使用占位符来寻求帮助信息。对于定义placholder颜色和我需要的其他CSS属性:: - webkit-input-placeholder property。

问题出在这里，当我尝试将占位符的颜色定义为输入的相同颜色时（保存在＆＃39; @input inputColor＆＃39;属性中）。



    @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

从@Input属性应用输入占位符样式

0 个答案: