Angular Material Chips 占位符 [英] Angular Material Chips placeholder

问题描述

我正在使用 Angular Material 自动完成芯片(https://material.angular.io/组件/芯片/示例).因此，在您单击字段后会出现占位符.是否可以删除这个占位符，这样我就可以使用没有角度材料样式的默认占位符?我试图在开发工具中找到它，但我找不到.

I'm using Angular Material autocomplete chips (https://material.angular.io/components/chips/examples). So there is placeholder which goes up after u click on field. Is it possible to delete this placeholder, so then i can use default placeholder w/o angular material styles ? I've tried to find it inside dev tools, but i couldn't.

推荐答案

如果你想自定义你的 Angular 材质组件并为 mat-chips 占位符提供你自己的样式，我有以下建议.您可以使用其中之一.

if you would like to customise your Angular material components and provide your own stylings for the mat-chips placeholder, I have the following suggestions. You may use one of them.

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

1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration

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

2) 使用 ViewEncapsulation:None.这将删除所有封装，从而使 CSS 规则具有全局效果.

2) Use ViewEncapsulation:None. This removes all encapsulation, such that CSS rules will have a global effect.

在你的component.ts上，你需要导入ViewEncapsulation，然后在你提供封装定义时选择None

On your component.ts, you will need to import ViewEncapsulation, followed by selecting None when you provide the definitions for encapsulation

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 上，

And on your component.css,

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

3) 自定义 MatPlaceholder 指令(在不使用 !important 的情况下覆盖 Angular Material 占位符 css)

3) Customising the MatPlaceholder directive (overriding the Angular Material placeholder css without using !important)

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

According to the Angular Material Form Field API, it turns out the placeholder directive is accessible once we have imported that module.

在您的 component.html 中，在您的 中包含带有自定义类的 指令，并删除占位符来自 内的

On your component.html, include the <mat-placeholder> directive with a custom class within your <mat-form-field>, and remove placeholder from the <input> within the <mat-chip-list>

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

在您的 component.css 上，使用您的自定义 CSS 属性定义 .placeholder 类(分配给 mat-placeholder 指令).

And on your component.css, define the .placeholder class (assigned to the mat-placeholder directive) with your custom CSS properties.

.placeholder {
  color: green
}

这篇关于Angular Material Chips 占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！