时间戳

首页 > 解决方案 > 为什么我不能使用 Angular 材质组件？

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

问题描述

我有一个 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 { }

标签： angularangular-material

解决方案

您需要导入特定于您将使用的组件的模块。在 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 {}

推荐阅读