angular - mat-toolbar、mat-sidenav 和 mat-sidenav-container 不是已知元素

Question

我正在尝试使用 mat-toolbar 但出现错误:

ma​​t-menu.component.html:

<mat-toolbar color="primary">

  <span>Responsive Navigation</span>

  <span class="example-spacer"></span>

  <div fxShow="true" fxHide.lt-md="true">

    <!-- The following menu items will be hidden on both SM and XS screen sizes -->

    <a href="#" mat-button>Menu Item 1</a>

    <a href="#" mat-button>Menu Item 2</a>

    <a href="#" mat-button>Menu Item 3</a>

    <a href="#" mat-button>Menu Item 4</a>

    <a href="#" mat-button>Menu Item 5</a>

    <a href="#" mat-button>Menu Item 6</a>

  </div>

  <div fxShow="true" fxHide.gt-sm="true">

    <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>

  </div>

</mat-toolbar>

<mat-sidenav-container fxFlexFill class="example-container">

  <mat-sidenav #sidenav fxLayout="column">

    <div fxLayout="column">

      <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>

      <a href="#" mat-button>Menu Item 1</a>

      <a href="#" mat-button>Menu Item 2</a>

      <a href="#" mat-button>Menu Item 3</a>

      <a href="#" mat-button>Menu Item 4</a>

      <a href="#" mat-button>Menu Item 5</a>

      <a href="#" mat-button>Menu Item 6</a>

    </div>

  </mat-sidenav>

  <!--<mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>-->

</mat-sidenav-container>

ma​​t-menu.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mat-menu',
  templateUrl: './mat-menu.component.html',
  styleUrls: ['./mat-menu.component.scss']
})
export class MatMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我在我的 app.module.ts 中导入了以下内容:我相信我已经导入了所有必需的模块，但不确定为什么 angular 无法识别 mat-toolbar 和其他组件

import {MatToolbarModule} from '@angular/material/toolbar';
import { MatMenuComponent } from '../../components/mat-menu/mat-menu.component';
import {
  MatAutocompleteModule,MatButtonModule,MatButtonToggleModule,MatCardModule,
  MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatExpansionModule,
  MatGridListModule,  MatIconModule,  MatInputModule,  MatListModule,  MatMenuModule,  MatNativeDateModule,  MatPaginatorModule,  MatProgressBarModule,  MatProgressSpinnerModule,
  MatRadioModule,MatRippleModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,MatSnackBarModule, MatSortModule,MatStepperModule,  MatTooltipModule,
} from '@angular/material';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    ReactiveFormsModule,
    MatTabsModule,
    MatSelectModule,
    MatTableModule,
    MatToolbarModule,
    BrowserModule,
    HttpClientModule,
    HttpModule,
    FileUploadModule
  ],

我收到以下错误:

compiler.js:24668 Uncaught Error: Template parse errors:
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    [ERROR ->]<mat-toolbar color="primary">

      <span>Responsive Navigation</span>
"): ng:///ComponentsModule/MatMenuComponent.html@2:4
'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <mat-sidenav-container fxFlexFill class="example-container">

      [ERROR ->]<mat-sidenav #sidenav fxLayout="column">

        <div fxLayout="column">
"): ng:///ComponentsModule/MatMenuComponent.html@36:6
'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </mat-toolbar>

    [ERROR ->]<mat-sidenav-container fxFlexFill class="example-container">

      <mat-sidenav #sidenav fxLayout="): ng:///ComponentsModule/MatMenuComponent.html@34:4
    at syntaxError (compiler.js:485) [<root>]
    at TemplateParser.parse (compiler.js:24668) [<root>]
    at JitCompiler._parseTemplate (compiler.js:34621) [<root>]
    at JitCompiler._compileTemplate (compiler.js:34596) [<root>]
    at eval (compiler.js:34497) [<root>]
    at Set.forEach (<anonymous>) [<root>]
    at JitCompiler._compileComponents (compiler.js:34497) [<root>]
    at eval (compiler.js:34367) [<root>]
    at Object.then (compiler.js:474) [<root>]
    at JitCompiler._compileModuleAndComponents (compiler.js:34366) [<root>]
    at JitCompiler.compileModuleAsync (compiler.js:34260) [<root>]
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239) [<root>]
    at PlatformRef.bootstrapModule (core.js:5567) [<root>]
    at eval (main.ts:12) [<root>]

Answer 1

您正在做的事情的问题是，从 AppModule 导出的 Material 模块无法在您的自定义 MatMenuModule 中访问

而是创建一个 SharedModule，然后将所有 @angular/material 模块导入其中。以与现在相同的方式从 SharedModule 导出它。

然后在您的自定义 MatMenuModule 中导入 SharedModule

检查这个简单的DEMO