[英]Angular Material sidenav directive does not work in app.component
[英]Angular 5 - Angular Material does not work in component
我在我的angular 5应用程序中实现了角材料。 当我导入app.module.ts时-我没有问题,但是当我在页面中使用page.component.html时,它不起作用,显示以下错误:
'Uncaught Error: Template parse errors:
'mat-toolbar-row' is not a known element:
'1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module.
'2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("r="let paragraph of paragraphs">{{paragraph}}</p>
<mat-toolbar color="primary">
[ERROR ->]<mat-toolbar-row>
<span>MyMaterial</span>
"): ng:///SharedComponentsModule/FollowUpComponent.html@35:12
'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. ("
<h6>Answer:</h6>
<p *ngFor="let paragraph of paragraphs">{{paragraph}}</p>
[ERROR ->]<mat-toolbar color="primary">
<mat-toolbar-row>
<span>MyMaterial</span>
"): ng:///SharedComponentsModule/FollowUpComponent.html@34:8
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatToolbarModule } from '@angular/material';
@NgModule({
imports: [MatButtonModule, MatToolbarModule],
exports: [MatButtonModule, MatToolbarModule]
})
export class MaterialModule { }
我有进口MaterialModule
并列入imports
的app.module.ts
。
这是我组件的HTML:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>MyMaterial</span>
<span class="example-spacer"></span>
<button mat-button>About</button>
<button mat-button>Services</button>
<button mat-button>Contact</button>
</mat-toolbar-row>
</mat-toolbar>
有完全相同的问题。 我使用大锤方法来解决它。 我也不喜欢它,但是它也可以为您工作。
npm install --save @angular/material @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.