mat-toolbar，mat-sidenav和mat-sidenav-container未知

Question

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

mat-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>

mat-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无法识别出垫工具栏和其他组件

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

您应该将模块导入与组件相关的module.ts文件中。 例如，您的情况下为mat-menu.module.ts文件。

Answer 2

您正在做的问题是，在自定义MatMenuModule内部无法访问AppModule导出的材料模块

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

然后导入SharedModule您的自定义里面MatMenuModule

检查这个简单的演示