使用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時從控制檯獲取錯誤

回答

相關問題