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

Question

我最近开始学习 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 指令值应用于一组自定义标签而不在模板中重复它？

Answer 1

您可以在模块级别（给定模块中的所有字段）或组件级别注入 MatFormFieldDefaultOptions。它包含在文档 here.

中

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

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

How to apply a given directive value to multiple tags in Angular Material?

angular

typescript

angular-material

angular-directive

angular-template