使用mdIcon时从控制台获取错误

当我使用mdIcon时，Angular发生错误。下面是代码：使用mdIcon时从控制台获取错误

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

错误：

ORIGINAL EXCEPTION: No provider for MdIconRegistry! Error: DI Exception at NoProviderError.BaseException [as constructor] (exceptions.ts:14) at NoProviderError.AbstractProviderError [as constructor] (reflective_exceptions.ts:53) at new NoProviderError (reflective_exceptions.ts:85) at ReflectiveInjector_._throwOrNull (reflective_injector.ts:844) at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:873) at ReflectiveInjector_._getByKey (reflective_injector.ts:835) at ReflectiveInjector_.get (reflective_injector.ts:632) at ElementInjector.get (element_injector.ts:19) at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:141) at DebugAppView.AppView.create (view.ts:110)

任何人都可以请帮我，我做错了什么在这里？

来源

2016-05-09 siva

更新使用材料阿尔法8-4 2.0.0发布：

您需要包括MdIconRegistry在你app.modules.ts文件的供应商。这里是一个功能例如：

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

不要忘记安装hammerjs +分型，并添加import 'hammerjs';您main.ts，如果你想使用MD-滑动切换文件，MD-滑块模块。

来源

2016-09-17 16:11:45 acumartini

谢谢，它帮助了我，但不要忘记导入HttpModule。 – TheZodchiy

感谢您的评论:) HttpModule的导入在那里。或者我错过了什么...... – acumartini

你需要列出它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'); 
    } 
}

来源

2016-05-09 14:47:19

如果这个变量“MdIconRegistry”从何而来？ – Doglas

https://github.com/angular/material2/blob/1efbbb934f28e0aa92e7827ba1ae73e87beeb7a3/src/demo-app/main.ts#L7 –

导入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] 
})

来源

2016-08-10 20:45:17

对于使用标准的图标，你只需要把字体到您的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配置中。

来源

2016-09-17 19:58:03 ykravch

你应该能够只导入MaterialRootModule在app.module.ts：

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

来源

2016-09-30 22:42:23 Fred

这将工作于[2.0.0-alpha.9]（https://github.com/angular/material2/releases/tag/2.0.0-alpha.9）。 – JayChase

使用mdIcon时从控制台获取错误

回答

相关问题