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

Question

使用 <md-icon> 时出现此错误：

ORIGINAL EXCEPTION: No provider for 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 的原因。

这里是 link 来源： https://github.com/angular/material2/blob/master/src/components/icon/icon.ts

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

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

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

  constructor(private _http: Http) {}

我想 Http 可能用于从 url 获取图标？因此，如果您深入研究源代码，您可以在其中找到 Http。

Answer 2

Looking at the source reveals that MdIcon uses MdIconRegistry which uses Http to load the icon. This is also mentioned in a comment for MdIcon.

那个图书馆不是独立的，这似乎仍然很奇怪，但现在似乎是这样。

Answer 3

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

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

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

Answer 4

Angular 7

对于我这个错误的解决方案是将MatIconRegistry添加到我的APP模块上的供应商：

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

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

Angular Material md-icon error No provider for Http

angular-material

angular