'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屋!