使用 mdIcon 时从控制台收到错误

Question

当我使用 mdIcon 时，Angular 会抛出一个错误。下面是代码：

import {Component} from '@angular/core';
import {MdIcon} from '@angular2-material/icon';
@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],

})
export class AppComponent {} 

错误：

原始例外：没有 MdIconRegistry 的提供者！ 错误：DI 异常 在 NoProviderError.BaseException [作为构造函数] (exceptions.ts:14) 在 NoProviderError.AbstractProviderError [作为构造函数] (reflective_exceptions.ts:53) 在新的 NoProviderError (reflective_exceptions.ts:85) 在 ReflectiveInjector_._throwOrNull (reflective_injector.ts:844) 在 ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:873) 在 ReflectiveInjector_._getByKey (reflective_injector.ts:835) 在 ReflectiveInjector_.get (reflective_injector.ts:632) 在 ElementInjector.get (element_injector.ts:19) 在 DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:141) 在 DebugAppView.AppView.create (view.ts:110)

谁能帮我看看我做错了什么？

Answer 1

您应该可以只在 app.module.ts 中导入 MaterialRootModule：

import { MaterialModule } from '@angular/material';
@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ],
})

Answer 2

使用材料 alpha 8-4 更新 2.0.0 版本：

您需要在 app.modules.ts 文件中包含 MdIconRegistry 作为提供程序。这是一个功能示例：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MdButtonModule } from '@angular2-material/button';
import { MdButtonToggleModule } from '@angular2-material/button-toggle';
import { MdCardModule } from '@angular2-material/card';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdGridListModule } from '@angular2-material/grid-list';
import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
import { MdInputModule } from '@angular2-material/input';
import { MdListModule } from '@angular2-material/list';
import { MdMenuModule } from '@angular2-material/menu';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdRadioModule } from '@angular2-material/radio';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdSliderModule } from '@angular2-material/slider';
import { MdSlideToggleModule } from '@angular2-material/slide-toggle';
import { MdTabsModule } from '@angular2-material/tabs';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdTooltipModule } from '@angular2-material/tooltip';

import { AppComponent } from './app.component';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        MdButtonModule,
        MdButtonToggleModule,
        MdCardModule,
        MdCheckboxModule,
        MdGridListModule,
        MdIconModule,
        MdInputModule,
        MdListModule,
        MdMenuModule,
        MdProgressBarModule,
        MdProgressCircleModule,
        MdRadioModule,
        MdSidenavModule,
        MdSliderModule,
        MdSlideToggleModule,
        MdTabsModule,
        MdToolbarModule,
        MdTooltipModule
    ],
    providers: [
        MdIconRegistry
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果您想使用 md-slide-toggle 和 md-slider 模块，请不要忘记安装hammerjs + typings 并将import 'hammerjs'; 添加到您的main.ts 文件中。

Answer 3

对于使用标准图标，您只需将字体放入您的 html 中（最简单的解决方案就是使用 CDN 作为字体）： <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

其他方式在文档中有描述：http://google.github.io/material-design-icons/#icon-font-for-the-web

您还需要（与任何其他材料包一样）将材料模块放置到 NgModule 配置到导入中。

Answer 4

导入 Http。 访问https://groups.google.com/forum/#!topic/angular-material2/ZEHFELl2-Sw

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:
      <md-toolbar>
         <md-icon class="demo-toolbar-icon">menu</md-icon>
         <span>Default Toolbar</span>
         <span class="demo-fill-remaining"></span>
         <md-icon>code</md-icon>
    </md-toolbar>`,
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})

Answer 5

需要在providers或viewProviders中列出并注册一些图标或图标集

import {Component, ViewEncapsulation} from '@angular/core';
import {MdIcon} from '@angular2-material/icon';

@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],
    viewProviders: [MdIconRegistry],
})
export class AppComponent {
    constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
            .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
            .registerFontClassAlias('fontawesome', 'fa');
    }
}