Question

我有使用@ angular2-material 2.0.0-alpha.8-2版本的angular2应用程序。一切正常。现在我决定将材料版本升级到最新版本，即2.0.0-alpha.9-3。我按照GETTING_STARTED中提到的步骤进行操作。之前我已经导入了以下单个模块：

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

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....

然而，2.0.0-alpha.9-3版本的更改日志表示：

＆＃34; Angular Material已从@ angular2-material / ...包改为@ angular / material下的单个包。随着这一变化，有一个新的NgModule，MaterialModule，它包含所有组件。＆＃34;

所以我删除了显式导入的材质模块并将其更改为：

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

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

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

＆＃39; MD-图标＆＃39;不是一个已知元素：

如果＆＃39; md-icon＆＃39;是一个Angular组件，然后验证它是否是该模块的一部分。
如果＆＃39; md-icon＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止显示此消息。

我是否需要显式导入单个模块，或者如更改日志中所述，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'}

然后在子模块中，您必须再次导入MaterialModule。 e.g。

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

Answer 3

您需要在app.module.ts中导入 MatIconModule ，并将其添加到同一文件中的导入数组中。

就像这样：

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

Answer 4

添加

<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 5

解决方案是添加md-icon，md-input等模块和样式表。

您还需要在app.module.ts中添加如下CUSTOM_ELEENT_SCHEMA：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

然后添加

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

Answer 6

添加此到index.html：

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

并将其添加到app.module.ts文件中：

import {
  MatIconModule
} from '@angular/material';

imports: [MatIconModule]

Answer 7

使用mat-icon的两个步骤：

将此内容插入到index.html文件中。

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

将此行插入到app.module.ts文件中。如果执行延迟加载，则将其包括在内在该模块或sharedModule中。
```
import { MatIconModule } from '@angular/material/icon';
```

Angular2材料＆md-icon＆＃39;不是一个已知的元素

7 个答案: