我正在尝试使用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不能识别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>]
发布于 2018-06-26 03:57:39
您正在执行的操作的问题是,在自定义MatMenuModule
中无法访问从AppModule
导出的材料模块
相反,创建一个SharedModule
,然后导入其中的所有@angular/material
模块。将其导出的方法与现在从SharedModule
中执行的方法相同。
然后在您的自定义MatMenuModule
中导入SharedModule
检查这个简单的DEMO
发布于 2018-06-26 03:41:26
您应该在与组件相关的module.ts文件中导入模块。例如,在您的示例中为mat-menu.module.ts
文件。
https://stackoverflow.com/questions/51030677
复制相似问题