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(),
  ]
})