Question

我最近将项目更新为Angular v6。我正在尝试按照此指南安装Angular Material： Material guide for Angular

这是我的应用程序的模块

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
 declarations: [
   AppComponent,
   PruebaComponent
 ],
 imports: [
   ...
   MatButtonModule, 
   BrowserAnimationsModule,
   MatCheckboxModule
 ],

这是测试组件的html：

<h3>Fab Buttons</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

但是，出现此错误：

compiler.js:215 Uncaught Error: Template parse errors:
'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

Answer 1

您需要在app.module.ts中添加MatIconModule才能在项目中使用。

尝试一下-

import { MatIconModule } from '@angular/material';

@NgModule({
  declarations: []
  imports: [MatIconModule,....]
});

Answer 2

如果要在Angular 6中使用Material，则应依赖@angular/schematics，如in their blog所述。

简单运行

ng add @angular/material

然后将安装，设置Angular Material，并且您无需执行任何操作。

要使用材料组件，请遵循@PardeepJain的回答。

无法使用MatIcon组件

2 个答案: