'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
:
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,
// ...
]
})
P.S.使用材质图标的正确方法是使用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屋!