Angular Material md-icon 错误没有 Http 提供程序

Question

使用<md-icon>此错误：

原始例外：没有 Http 提供程序！

所以我在我的组件中添加了HTTP_PROVIDERS并解决了它。 所以我的问题......为什么我需要将HTTP_PROVIDERS添加到我的组件中才能让<md-icon>工作，即使我没有在我的应用程序中使用HTTP_PROVIDERS否则？！

这是我的工作组件。 从 providers 数组中删除HTTP_PROVIDERS会引发上述错误。

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

@Component({
  moduleId: module.id,
  selector: 'foo-app',
  template: `<md-icon>face</md-icon>`,
  directives: [ MdIcon ],
  providers: [MdIconRegistry, HTTP_PROVIDERS]
})
export class FooAppComponent {
  title = 'Material 2 Foo App';
}

另一个注意事项，这一行将显示没有 Http 错误且不需要HTTP_PROVIDERS的图标：

<i class="material-icons">face</i>

Answer 1

稍微查看 angular2-material 的源代码，md-icon 取决于 angular2 的Http ，这就是为什么您看到需要 HTTP_PROVIDERS。

继承人的源链接： https : //github.com/angular/material2/blob/master/src/components/icon/icon.ts

在 /src/components/icon/icon.ts 中，该类需要MdIconRegistry其中MdIcon具有构造函数：

constructor(
  private _element: ElementRef,
  private _renderer: Renderer,
  private _mdIconRegistry: MdIconRegistry) { }

和MdIconRegistry需要Http与MdIconRegistry具有构造函数：

  constructor(private _http: Http) {}

我猜 Http 可能用于从 url 获取图标？ 因此，如果您深入挖掘源代码的几个级别，您可以在其中找到 Http。

Answer 2

角 7

对我来说，此错误的解决方案是将MatIconRegistry添加到我的 APP 模块上的提供程序：

@NgModule({
  declarations: [..],
  imports: [
   ..,MatIconModule,
    HttpClientModule,
   ..
  ],
  providers:[  MatIconRegistry ],
  exports: [..]
})
export class SomeModule { }

Answer 3

查看源代码显示 MdIcon 使用 MdIconRegistry 使用 Http 加载图标。 MdIcon的评论中也提到了这一点。

那个库不是自包含的，这似乎仍然很奇怪，但现在似乎就是这样。

Answer 4

使用 angular 2.1.0 和 angular material 2.0.0-alpha.10 执行以下操作：

import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ]
})