28

我有使用 @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 版本的更改日志说：

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

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

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

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

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

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

  1. 如果 'md-icon' 是一个 Angular 组件，那么验证它是这个模块的一部分。
  2. 如果“md-icon”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

我是否需要显式导入单个模块或如更改日志中所述 MaterialModule 包含所有组件并且我不应该显式导入单个模块？如果我不应该导入单个模块，那么可能是什么错误来源？

4

7 回答 7

25

那段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>
于 2016-10-27T18:40:36.413 回答
16

您需要在 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 { }
于 2018-01-31T14:18:52.380 回答
11

如果你像这样加载一个子模块：

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

然后在子模块中，您必须再次导入 MaterialModule。例如

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}
于 2017-01-06T02:51:51.783 回答
2

添加

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

于 2017-07-20T16:06:12.773 回答
2

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

您还需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA，如下所示：

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

然后加

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
于 2019-08-04T07:16:39.767 回答
2

使用 mat-icon 的两个步骤：

  1. 将其插入 index.html 文件。

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

  2. 将此行插入 app.module.ts 文件。如果执行延迟加载，则将其包含在该模块或 sharedModule 中。

    import { MatIconModule } from '@angular/material/icon';
于 2019-08-22T06:28:03.363 回答
0

将此添加到 index.html：

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

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

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

imports: [MatIconModule]
于 2019-06-02T16:09:26.453 回答