我应该如何在 app.module.ts 中导入 MatDrawer 和 MatDrawerContainer？角 9答案

【问题标题】：how exactly should i import MatDrawer and MatDrawerContainer in app.module.ts? angular 9我应该如何在 app.module.ts 中导入 MatDrawer 和 MatDrawerContainer？角 9
【发布时间】：2020-10-25 13:42:49
【问题描述】：

当我单击工具栏图标时，我试图使用角度材料打开侧导航。一切正常，直到我尝试实际打开导航栏，我得到了错误：

由模块“AppModule in /src/app/app.module.ts”导入的意外指令“@angular/material/sidenav/index.d.ts 中的 MatDrawer”。请添加@NgModule 注解。

这里是 npm 模块（package.json）：

"@angular/animations": "^9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.11",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/router": "~9.1.11",
"jQuery": "^1.7.4",
"jquery": "^3.5.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

这是我的 app.module：

import { MatDrawer } from '@angular/material/sidenav';
import { MatDrawerContainer } from '@angular/material/sidenav';

@NgModule({
  declarations: [
    AppComponent,
    DressesComponent,
    LoadingSpinnerComponent,
    Toolbar,
    ButtonToggle,
    Sidenav
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatSelectModule,
    MatDialogModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonToggleModule,
    MatDrawer,
    MatDrawerContainer
  
  ],
  providers: [DressesService, SidenavService],
  bootstrap: [AppComponent]
})
export class AppModule { }

和app.component.html：

<html dir="rtl" lang="he">
    <toolbar></toolbar>
    <side-nav></side-nav>
</html>

【问题讨论】：

标签： html angular typescript web angular-material

【解决方案1】：

要导入组件和指令等，您导入它们的模块，而不是实际的组件和指令。所以需要导入MatSidenavModule而不是MatDrawer，MatDrawerContainer：

import {MatSidenavModule} from '@angular/material/sidenav';

@NgModule({
  declarations: [
    AppComponent,
    DressesComponent,
    LoadingSpinnerComponent,
    Toolbar,
    ButtonToggle,
    Sidenav
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatSelectModule,
    MatDialogModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonToggleModule,
    MatSidenavModule //<-- this one
  
  ],
  providers: [DressesService, SidenavService],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

【解决方案2】：

从组件中的 sidenav 导入如下。

import { MatDrawer } from '@angular/material/sidenav';

@ViewChild('drawer') drawer: MatDrawer;

【讨论】：