Angular2 材质“md-icon"不是已知元素 [英] Angular2 material 'md-icon' is not a known element

问题描述

我有一个使用@angular2-material 2.0.0-alpha.8-2 版本的angular2 应用程序.一切正常.现在我决定将材料版本升级到最新版本，即 2.0.0-alpha.9-3.我遵循了 GETTING_STARTED 中提到的步骤.早些时候，我导入了以下单个模块:

I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version. Everything works fine. Now I decided to upgrade material version to latest i.e. 2.0.0-alpha.9-3. I followed steps mentioned in GETTING_STARTED. Earlier I had imported individual modules as below:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

但是 2.0.0-alpha.9-3 版本的更改日志说:

However change log of 2.0.0-alpha.9-3 version says:

Angular Material 已从 @angular2-material/... 包更改为 @angular/material 下的单个包.伴随此更改，还有一个新的 NgModule， MaterialModule ，它包含所有组件.

"Angular Material has changed from @angular2-material/... packages to a single package under @angular/material . Along with this change, there is a new NgModule, MaterialModule , that contains all of the components."

所以我删除了明确导入的材料模块并将其更改为:

So I removed explicitly imported material modules and changed it to:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

此更改后，我收到以下错误

After this change I am getting following error

'md-icon' 不是已知元素:

'md-icon' is not a known element:

1. 如果md-icon"是一个 Angular 组件，则验证它是否是该模块的一部分.
2. 如果md-icon"是一个 Web 组件，则将CUSTOM_ELEMENTS_SCHEMA"添加到该组件的@NgModule.schemas"以抑制此消息.

我是否需要显式导入单个模块或如更改日志中提到的那样 MaterialModule 包含所有组件，我不应该显式导入单个模块?如果我不应该导入单个模块，那么错误的根源是什么?

Do I need to import individual modules explicitly or as mentioned in change log MaterialModule contains all components and I should not explicitly import individual modules? If I shouldn't import individual modules then what could be source of error?

推荐答案

export 部分怎么样?你在那里提供了 MaterialModule 吗?

What about the export section? Did you provide MaterialModule there?

@NgModule({
  imports: [
    MaterialModule.forRoot()
  ],
  exports: [
    MaterialModule
  ]
})

记得在 index.html 中提供图标样式:

Remember to provide icon styles in your index.html:

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

之后，您应该可以在视图中使用图标:

After that you should be able to use icons in your views:

<md-icon>delete</md-icon>

这篇关于Angular2 材质“md-icon"不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！