'mat-toolbar' 不是已知元素 - Angular 5 [英] 'mat-toolbar' is not a known element - Angular 5

问题描述

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

I have created a new project, and I am trying to add angular-material.

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

I have created material.module.ts in my app folder:

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

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

and I have imported it into one of my components:

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 know that it is working cause I have shown a material-icon as a test:

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

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

but when I try to create the footer it fails and it shows this message:

未捕获的错误:模板解析错误:'mat-toolbar' 不是已知元素:1. 如果 'mat-toolbar' 是一个 Angular 组件，那么验证它是否是这个模块的一部分.2. 如果'mat-toolbar' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息.

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.

推荐答案

那是因为你必须将一个模块导入到包含组件声明的模块中，不导入组件本身:

That's because you have to import a module to the module which contains the component declaration, not into the component itself:

app.module.ts

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

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

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

P.S. The correct way to use a material icon is to use the MatIcon component. Example usage:

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

这篇关于'mat-toolbar' 不是已知元素 - Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！