angular - Angular：NgStyle使用input :: first-line突出显示文本框中的单词？

Question

如何在 Angular 中突出显示文本框的内容？以下不起作用。当前使用材料文本框。

需要有条件地应用它，基于布尔变量 highlightTextFlag，可能使用 ngstyle 。

样本：

input::first-line { 
   background-color: green !important; 
}

实际代码：

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [ngStyle]="{'input::first-line': 'green' }"
    >
</mat-form-field>

如何突出显示输入字段中的文本？

Angular Material：突出显示文本框中的单词

Answer 1

您可以在组件 css 文件中添加 css，但使用类名而不是输入选择器，如下所示：

.myInput::first-line{
//your css
}

并将类名绑定到组件模板中的布尔变量，如下所示

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [class.myInput]=“myBooleanVar”
    >
</mat-form-field>