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

【问题标题】：How to apply a given directive value to multiple tags in Angular Material?如何将给定的指令值应用于 Angular Material 中的多个标签？
【发布时间】：2021-07-11 14:08:56
【问题描述】：

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

<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> 元素与样式一起出现，而不是它的子元素。另外，我不能简单地写

mat-form-field{
  appearance: outline;
}

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

【问题讨论】：

标签： angular typescript angular-material angular-directive angular-template

【解决方案1】：

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

这是一个stackblitz 来自他们在表单字段上的演示，它更改了组件中的所有字段。

【讨论】：