Question

我有一个Angular 10项目，但是对于某些组件，例如窗体字段，使用Angular材料却出现了一个奇怪的错误（相反，对于“表”之类的组件，一切正常）：

“ mat-form-field”不是已知元素：

如果“ mat-form-field”是Angular组件，请验证它是否属于此模块。

如果“ 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

您需要导入特定于要使用的组件的模块。在角材文档中，您将看到概述，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 {}

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

1 个答案: