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

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;
}

演示

Answer 2

您可以使用

:host::ng-deep .mat-select-placeholder {
   color: red;
} 

请记住，此方法很快就会被弃用，因此您可以将其添加.mat-select-placholder到全局样式表中，它也应该在那里工作。

Answer 3

您可以创建自己的 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';

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