Question

我正在使用Angular Material自动完成芯片（https://material.angular.io/components/chips/examples）。因此，有一个占位符，它会在您单击字段后上升。是否可以删除此占位符，所以我可以使用不带角度材质样式的默认占位符？我试图在开发工具中找到它，但是找不到。

Answer 1

您可以添加[floatLabel]="'never'"，以便在输入筹码时占位符不会上升并且不可见。

将其添加到mat-form-field

<mat-form-field class="example-chip-list" [floatLabel]="'never'"></mat-form-field>

Answer 2

如果您想自定义Angular材料组件并为垫片式占位符提供自己的样式，我有以下建议。您可以使用其中之一。

1）覆盖主style.css（或style.scss，无论使用哪种方式）上的类。如果您想知道，它是与index.html，main.ts，package.json等位于同一目录级别的目录。您可能需要添加!important声明

.mat-form-field-label {
  color:blue!important;
}

2）使用ViewEncapsulation:None。这将删除所有封装，这样CSS规则将具有全局作用。

在component.ts上，您将需要导入ViewEncapsulation，然后在提供封装定义时选择“无”

import { .. ViewEncapsulation } from '@angular/core';
.
.
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
  encapsulation: ViewEncapsulation.None
})

在您的component.css上，

.mat-form-field-label {
   color:blue!important;
 }

3）自定义MatPlaceholder指令（不使用！important覆盖Angular Material占位符css） [编辑]

根据Angular Material Form Field API，事实证明，一旦我们导入了该模块，就可以访问占位符指令。

在您的component.html上，将<mat-placeholder>指令和自定义类包含在<mat-form-field>中，并从<input>的{{1}}中删除占位符

<mat-chip-list>

然后在您的component.css上，使用自定义CSS属性定义<mat-form-field class="example-chip-list"> <mat-placeholder class="placeholder">Search</mat-placeholder> <mat-chip-list #chipList> <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)"> {{fruit}} <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> </mat-chip> <input #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)"> </mat-chip-list> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)"> <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit"> {{fruit}} </mat-option> </mat-autocomplete> </mat-form-field>类（分配给mat-placeholder指令）。

.placeholder

角材料芯片占位符

2 个答案: