Angular2材質'md-icon'不是已知元素

Question

我有angular2應用程序，它使用@ angular2-material 2.0.0-alpha.8-2版本。一切正常。 現在我決定將素材版本升級到最新版本，即2.0.0-alpha.9-3。我遵循了GETTING_STARTED中提到的步驟。 早些時候，我已經進口了各個模塊如下：

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

    MdIconModule, 
    MdButtonModule, 
    MdCardModule, 
    MdCheckboxModule, 

    .... 
    .... 

但是改變的2.0.0版本alpha.9-3日誌說：

「角材料具有@ angular2材料改變/ .. 。包到@ angular/material下的一個包中，隨着這個變化，還有一個新的NgModule，MaterialModule，它包含了所有的組件。

所以我刪除明確進口材料模塊，並將其改爲：

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

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

這種變化我收到以下錯誤後

「MD-圖標」不是一個已知的元素：

1. 如果'md-icon'是一個Angular組件，那麼請驗證它是否爲該模塊的一部分。
2. 如果'md-icon'是一個Web組件，然後將「CUSTOM_ELEMENTS_SCHEMA」添加到此組件的'@ NgModule.schemas'以禁止此消息。

我是否需要顯式導入個別模塊或如更改日誌中提到的那樣MaterialModule包含所有組件，而且我不應該明確導入各個模塊？如果我不應該導入單個模塊，那麼可能是什麼原因導致錯誤？

Answer 1

export部分怎麼樣？你在那裏提供MaterialModule嗎？

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

記住提供圖標的樣式在您的index.html：

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

之後，你應該能夠使用的圖標在您的看法：

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

Answer 2

如果您加載一個孩子模塊如下：

{path: 'childModule', loadChildren: 'app/child/child.module#childModule'} 

then在子模塊中，您必須再次導入MaterialModule。 例如

@NgModule({ 
    imports: [ 
     sharedModules, 
     childRouting, 
     MaterialModule.forRoot() 
    ], 
    declarations: [ 
    ], 
    providers: [] 
}) 
export class childModule { 
} 

Answer 3

添加

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

到index.html

和<i class="material-icons">delete</i>，而不是<md-icon>delete</md-icon>

Answer 4

您需要導入MatIconModule在app.module.ts並將其添加到您的進口陣列在同一個文件中。

喜歡本作例子：

import { BrowserModule } from "@angular/platform-browser"; 
import { NgModule } from "@angular/core"; 
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 
import { TreeModule } from "angular-tree-component"; 
import { HttpClientModule } from "@angular/common/http"; 

import { MatButtonModule } from "@angular/material/button"; 
import { MatIconModule } from "@angular/material/icon"; // <----- Here 

import { EclassService } from "./services/eclass.service"; 

import { AppComponent } from "./app.component"; 
import { FormsModule } from "@angular/forms"; 
import { AsyncTreeComponent } from "./components/async-tree/async-tree.component"; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    AsyncTreeComponent 
    ], 
    imports: [ 
    BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE 
    ], 
    providers: [EclassService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }