通过代码更改角度垫选择占位符颜色

Question

我正在使用Angular 5，并希望更改占位符文本颜色。 列表的文本内容完全正常（我可以更改颜色），但不是占位符。 我不是通过应用程序的主要css搜索硬编码解决方案，我需要通过代码动态更改它。

<mat-form-field>
    <mat-select placeholder="{{'TXTKEY' | translate }}" [style.color]="config.textColor">
        <mat-option *ngFor="let item of items" [value]="item.identifier" (click)="OnChange(item)">
            <div [style.color]="config.textColor"> {{item.name}}</div>
        </mat-option>
    </mat-select>
</mat-form-field>

Answer 1

仅使用代码解决这个问题很难。 这是一个半程序的解决方案。 线索是使用ngClass。 但是，您需要预定义类。

HTML

<mat-form-field>
    <mat-select [ngClass]="className" placeholder="{{someText}}">
        <mat-option *ngFor="let item of items" [value]="item.value">
            {{ item.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

打字稿：

  someText = "Enter your choice";
  someCondition = true;

  get className() {
    return this.someCondition ? 'class1' : 'class2';
  }

CSS ：

.class1  .mat-select-placeholder {
  color:red !important;
}

.class2  .mat-select-placeholder {
  color:blue !important;
}

DEMO

Answer 2

您可以创建自己的CSS类，并通过[ngClass]指令动态添加它们。

在您的HTML模板中

<input [ngClass]="{ 'classRed': colour==='red' , 'classGreen': colour==='green' }" placeholder="Type something here...">

在你的CSS文件中

.classRed::placeholder {
  color: red;
}

.classGreen::placeholder {
  color: green;
}

请注意，根据您支持的浏览器，需要一些不同的实现：

.classRed::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: red;
   opacity: 1; /* Firefox */
}
.classGreen::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: green;
   opacity: 1; /* Firefox */
}
.classRed:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}
.classGreen:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: green;
}
.classRed::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
.classGreen::-ms-input-placeholder { /* Microsoft Edge */
    color: green;
}

并在您的打字稿文件中

private colour = 'green';

这只是一个示例，但它允许您在运行时动态调整占位符文本的颜色。 您可以根据自己的需要自由优化。 ;）