typescript 通过代码更改角度垫选择占位符颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49467460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change angular mat-select placeholder color via code
提问by Iteration
I'm using Angular 5, and would like to change the placeholder text color. The text content of the list is perfectly working (I can change the color), but not the placeholder. I'm not searching an hardcoded solution via the main css of the app, I need to change it dynamically via code.
我正在使用 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>
回答by Vega
Addressing this subject would be hard with code only. Here is a solution in semi-programatical way. The clue being to use ngClass. You would need to predefine classes, though.
仅使用代码很难解决这个问题。这是半编程方式的解决方案。线索是使用 ngClass。不过，您需要预定义类。
HTML
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>
Typescript:
打字稿：
someText = "Enter your choice";
someCondition = true;
get className() {
return this.someCondition ? 'class1' : 'class2';
}
CSS:
CSS:
.class1 .mat-select-placeholder {
color:red !important;
}
.class2 .mat-select-placeholder {
color:blue !important;
}
回答by Mostafa Bagheri
You can use
您可以使用
:host::ng-deep .mat-select-placeholder {
color: red;
}
Keep in mind this method will soon be depreciated, so you can add the .mat-select-placholderto your global stylesheet and it should work there also.
请记住，此方法很快将被弃用，因此您可以将 添加.mat-select-placholder到全局样式表中，它也应该在那里工作。
回答by Lynx 242
You can create your own CSS-classes and add them dynamically via the [ngClass] directive.
您可以创建自己的 CSS 类并通过 [ngClass] 指令动态添加它们。
In your HTML-template
在您的 HTML 模板中
<input [ngClass]="{ 'classRed': colour==='red' , 'classGreen': colour==='green' }" placeholder="Type something here...">
In your CSS-file
在你的 CSS 文件中
.classRed::placeholder {
color: red;
}
.classGreen::placeholder {
color: green;
}
Note that, according to the browser you support, there are some different implementations needed:
请注意，根据您支持的浏览器，需要一些不同的实现：
.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;
}
And in your typescript file
在你的打字稿文件中
private colour = 'green';
This is just an example, but it lets you adjust the color of the placeholder's text dynamically at runtime. You're free to optimize it to your needs. ;)
这只是一个示例，但它可以让您在运行时动态调整占位符文本的颜色。您可以根据自己的需要自由地优化它。;)
