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

Posted 2023-02-22

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

【英文标题】：How to apply a given directive value to multiple tags in 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 指令值应用于一组自定义标签而不在模板中重复它？

【参考方案1】：

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

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