[英]how exactly should i import MatDrawer and MatDrawerContainer in app.module.ts? angular 9
當我單擊工具欄圖標時，我試圖使用 angular 材料打開側導航。 一切正常，直到我嘗試實際打開導航欄，我得到了錯誤：
由模塊“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>
要導入組件和指令等，您導入它們的模塊，而不是實際的組件和指令。 所以你需要導入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 { }
從組件中的 sidenav 導入，如下所示。
import { MatDrawer } from '@angular/material/sidenav';
@ViewChild('drawer') drawer: MatDrawer;
如何匹配帶有angular2 rc5的APP MODULE TS中的任何路線？
[英]How to match any routes in APP MODULE TS with angular2 rc5?
如何將JSON文件導入到app.ts中以顯示app.html中的選項？
[英]How can I import my JSON file in to app.ts to display the options in app.html?
我們是否應該在Angular應用程序內創建的所有模塊中導入BrowserModule？
[英]Should we import BrowserModule in all modules created inside an Angular app?
我應該在 Angular index 和 app.component.html 中寫什么？
[英]What should I write in Angular index and app.component.html?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.