首页 文章

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

提问于
浏览 次
20

我有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-material / ...包更改为@ angular / material下的单个包 . 随着此更改，还有一个新的NgModule，MaterialModule，其中包含所有组件 . ”

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

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

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

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

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

  • 如果'md-icon'是Angular组件，则验证它是否为此模块的一部分 .

  • 如果'md-icon'是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息 .

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

angular typescript angular-material2

4 回答

  • 19

    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>
    回复于
  • 11

    如果您加载这样的子模块：

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

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

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

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

    像这样例如：

    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 { }
    回复于
  • 7

    加

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

    回复于

相关问题