为什么我不能使用 Angular 材质组件？

Question

我有一个 Angular 10 项目，但我在使用 Angular 材料处理某些组件时遇到了一个奇怪的错误，比如表单域（而不是像“表格”这样的组件，一切正常）：

'mat-form-field' 不是已知元素：

1. 如果“mat-form-field”是一个 Angular 组件，则验证它是该模块的一部分。
2. 如果“mat-form-field”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息

这是我的应用模块：

...
    import { MatFormField, MatLabel } from '@angular/material/form-field';
...

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatFormField
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您需要导入特定于您将使用的组件的模块。在 Angular Material 文档中，您将看到概述、API 和示例选项卡。选择具有您需要使用该特定组件的模块名称的 API。

在你的情况下：

import {MatFormFieldModule} from '@angular/material/form-field';

不要忘记在 NgModule 导入中添加上述模块名称

如果您使用多个材料组件，更好的解决方案是为材料模块创建一个模块并在 App.module.ts 中导入

import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}