如何将给定的指令值应用于 Angular Material 中的多个标签？

Question

我最近开始学习 Angular 和 Material，在我的项目中我意识到，我必须创建具有相同外观的 forms。 例如，注册表单的模板如下所示：

<mat-card>
  <h2>{{'NAV.REGISTRATION' | translate}}</h2>
  <form [formGroup]="registrationForm" (ngSubmit)="submitRegistrationForm()">
    <div>
      <mat-form-field appearance="outline">
        <input matInput formControlName="fullName" placeholder="{{'REGISTRATION.NAME' | translate}} *">
      </mat-form-field>
      <mat-form-field appearance="outline">
        <input matInput formControlName="password" placeholder="{{'REGISTRATION.PASSWORD' | translate}} *" type="password">
      </mat-form-field>
...

我想将appearance="outline"应用于模板中的所有<mat-form-field>标记。 我尝试过应用<div class="mat-form-field-appearance-outline"> ，但它当然会导致<div>元素与 styles 一起出现，而不是它的子元素。 另外，我不能简单地写

mat-form-field{
  appearance: outline;
}

在模板的.scss文件中。 所以，总而言之，我可以通过哪些方式将 Material 指令值应用于一组自定义标签而不在模板中重复它？

Answer 1

您可以在模块级别（给定模块中的所有字段）或组件级别注入MatFormFieldDefaultOptions 。 此处的文档对此进行了介绍。

这是一个stackblitz从他们在表单字段上的演示中派生出来的，它改变了组件中的所有字段。