我应该如何在 app.module.ts 中导入 MatDrawer 和 MatDrawerContainer？ angular 9
[英]how exactly should i import MatDrawer and MatDrawerContainer in app.module.ts? angular 9
问题描述
I was trying to use angular material to open a side nav when I click on the toolbar icon.
当我单击工具栏图标时，我试图使用 angular 材料打开侧导航。 Everything works fine until I try to actually open the navbar, I got the error:一切正常，直到我尝试实际打开导航栏，我得到了错误：
Unexpected directive 'MatDrawer in @angular/material/sidenav/index.d.ts' imported by the module 'AppModule in /src/app/app.module.ts'.
Here are the npm modules (package.json):以下是 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"
here is my app.module:这是我的 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 { }
and app.component.html:和 app.component.html：
<html dir="rtl" lang="he">
<toolbar></toolbar>
<side-nav></side-nav>
</html>
2 个解决方案
解决方案1
4 已采纳 2020-07-05 10:20:02
To import components and directives etc, you import their modules, not the actual components and directives.要导入组件和指令等，您导入它们的模块，而不是实际的组件和指令。 So you need to import MatSidenavModule instead of MatDrawer , MatDrawerContainer :所以你需要导入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
0 2021-04-14 12:01:11
Import from sidenav in your component as below.从组件中的 sidenav 导入，如下所示。
import { MatDrawer } from '@angular/material/sidenav';
@ViewChild('drawer') drawer: MatDrawer;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.