'mat-toolbar'不是已知的元素 - Angular 5

Question

我创建了一个新项目,我正在尝试添加angular-material.

我material.module.ts在我的app文件夹中创建:

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

我已将其导入我的一个组件中:

import { MaterialModule } from '../material.module';

此外,我已经设置了角度材料 index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在我的 style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

我知道这是有效的,因为我已经展示了material-icon一个测试:

<i class="material-icons">face</i>

但是当我尝试创建页脚时,它会失败并显示以下消息:

未捕获错误:模板解析错误:'mat-toolbar'不是已知元素:1.如果'mat-toolbar'是Angular组件,则验证它是否是此模块的一部分.2.如果'mat-toolbar'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.

Answer 1

那是因为您必须将模块导入包含组件声明的模块,而不是导入组件本身:

app.module.ts

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

PS使用材质图标的正确方法是使用该MatIcon组件.用法示例:

<mat-icon>home</mat-icon>

Answer 2

快速修复的最佳方法

import {MatToolbarModule} from '@angular/material/toolbar'; 

在你的 app.module.ts

然后在您的声明[] 中声明 MatToolbarModule。