角2材质:同一文件中的相同图标显示在一个组件中，而不是另一个组件中。

Question

我将Angular 2 rc 5与ng2-Material alpha 7-2结合使用。

基本问题是，使用<md-icon svgIcon='icon'>显示来自同一个svg文件的相同图标将在一个组件中工作，而不是在另一个组件中工作，即使向根AppModule提供了MdIconModule和MdIconRegistry。

复制问题

• 开放这个柱塞
• 注意，MdIconModule和MdIconRegistry是作为MaterialModule.forRoot()的一部分导入到主AppModule中的。
• 打开AppComponent并注意到对addSvgIconSet()的调用来注册图标
• 在模板中，<md-icon svgIcon='ic_account_box_24px'>用于显示图标。在视图中，图标成功地显示在导航条上方。
• 打开app/crisis-center/crisis.list.component并在视图中打开危机中心。
• 注在模板中，存在相同的<md-icon>。但是，在视图中的危机列表上方没有显示任何图标。browser dev tools的dom检查器表明，角解析器甚至没有将其识别为角组件(在DOM中，它与代码完全相同)。

因为我将图标模块和服务导入根模块，所以我希望整个应用程序都可以使用该服务。由于我使用该服务在引导后的iconRegistry.addSvgIconSet()中注册图标，所以我期望在整个应用程序中都可以访问这些图标。

PS:这可能与什么我昨天报告了有关，虽然在这种情况下，应用程序崩溃；在这种情况下，图标只是没有显示。

Answer 1

(这是我在这里的职位的复制，因为这两个问题实际上是相同的)

我发现，因为MdIconModule本身在其providers数组中有MdIconRegistry服务，所以每当另一个模块导入它时，就会提供一个新的服务实例。因此，在引导时加载并属于同一AppModule的所有组件都共享此服务的相同实例。但是，稍后加载的组件(通过延迟加载)具有不同的服务实例，因此无法看到在引导时注册的图标。

对于詹姆斯的帮助，我使用了巧尽心思构建的模块的解决方案，它根本不使用MdIconModule，而是单独声明MdIcon类。然后，我分别提供MdIconRegistry服务，并且只提供给根AppComponent。其结果是，只有一个服务应用程序的实例，并且在引导时注册的图标随处可见。

改性MdIconFixedModule

@NgModule({
    imports: [CommonModule, HttpModule],
    declarations: [MdIcon],
    exports: [MdIcon],
    providers: [],//leave empty to avoid multiple instances of MdIconRegistry
})
export class MdIconFixedModule {
    static forRoot() {
        return {
            ngModule: MdIconFixedModule,
            //will be available only to whoever calls .forRoot()
            providers: [MdIconRegistry] 
        };
    }
}

只需要使用图标的模块可以导入MdIconFixedModule，因为这不包含MdIconRegistry。还需要注册图标的AppModule导入包含服务的MdIconFixedModule.forRoot()。

此实现可以在这里看到。的详细信息

ng材料模块的这一限制被划分为修正了alpha 8版本。

Answer 2

import { NgModule, ModuleWithProviders  }       from '@angular/core';
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdCoreModule } from '@angular2-material/core';
import { MdInputModule } from '@angular2-material/input';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdMenuModule } from '@angular2-material/menu';
import { MdIconModule} from '@angular2-material/icon';

@NgModule({     
    exports:      [
      MdButtonModule,
      MdCardModule,
      MdCheckboxModule,
      MdCoreModule,
      MdInputModule,
      MdProgressCircleModule,
      MdToolbarModule,
      MdMenuModule,
      MdIconModule
    ]
})
export class MaterialModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MaterialModule,
      providers: [
      ]
    };
  }

}