angular-material - '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 中设置了角度 Material 。

  <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>

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

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.

Answer 1

那是因为您必须将一个模块导入到包含组件声明的模块中，不是 进入组件本身:
app.module.ts

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

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

附言使用 Material 图标的正确方法是使用 MatIcon零件。示例用法:

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