使用mdIcon时从控制台获取错误
当我使用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 {} 错误：
原始例外:没有提供MdIconRegistry！错误: NoProviderError.BaseException as constructor at NoProviderError.AbstractProviderError as constructor 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)。DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:141)在DebugAppView.AppView.create (view.ts:110)的ElementInjector.get (element_injector.ts:19)
有人能帮我一下我做错了什么吗？
回答 5
Stack Overflow用户
发布于 2016-09-17 16:11:45
使用资料alpha 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 { }如果您想使用md-幻灯片切换和md-滑块模块，请不要忘记安装import 'hammerjs'; +类型并将其添加到您的main.ts文件中。
Stack Overflow用户
发布于 2016-05-09 14:47:19
您需要在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');
}
}Stack Overflow用户
发布于 2016-09-30 22:42:23
您应该能够在您的MaterialRootModule中导入app.module.ts：
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [
MaterialModule.forRoot(),
],
})https://stackoverflow.com/questions/37118593
复制相似问题
腾讯云开发者
