为什么我不能使用 anguar/material 元素？答案

【问题标题】：Why I can not use anguar/material elements?为什么我不能使用 anguar/material 元素？
【发布时间】：2022-01-11 14:37:33
【问题描述】：

当我想使用有棱角的材料时。我有错误。

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

我导入了所有相关组件，但没有任何效果

import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

我得到的错误：

mat-expansion-panel-header' 不是已知元素： 1. 如果 'mat-expansion-panel-header' 是一个 Angular 组件，然后验证它是这个模块的一部分。

没有文档说明如何申请使用这些元素。

【问题讨论】：

您将这些模块导入您的@NgModule。不是你的组件。

标签： angular angular-material

【解决方案1】：

Angular 与 modules 和 components 一起使用。您的组件将使用的所有内容都必须在Module 中注册。您需要做的就是将这些材料模块添加到您的AppModule 类中，如下所示：

@NgModule({
    declarations: [],
    imports: [
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatStepperModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

本文档可以进一步帮助您https://angular.io/guide/architecture-modules

【讨论】：

【解决方案2】：

永远不要忘记将MatExpansionModule 从@angular/material/expansion 导入到您的*.module.ts 文件中，

然后，将它添加到 @NgModule 的 *.module.ts 文件的 imports 数组中

在此之后，您将不会遇到与MatExpansionModule 相关的任何错误。

PS：尝试只导入应用所需的那些模块。

【讨论】：

【解决方案3】：

您是否添加了对相关 NG 模块的引用，例如app.module.ts

.
.
.
import { MatDialogModule } from '@angular/material';
.
.
.
@NgModule({
  imports: [  
    MatDialogModule,

  ],

【讨论】：

【解决方案4】：

使用 import {CdkAccordionModule} from '@angular/cdk/accordion' 而不是 mat-accordian 它将与 mat-accordian 一样工作

【讨论】：