Angular 2材质：来自同一文件的相同图标显示在一个组件中，而不显示在另一个组件中

Question

我正在将Angular 2 rc 5与ng2-Material alpha 7-2 。

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

复制问题

• 打开这个矮人
• 请注意， MdIconModule和MdIconRegistry作为MaterialModule.forRoot()一部分导入到主AppModule
• 打开AppComponent并注意对addSvgIconSet()的调用以注册图标
• 在模板中， <md-icon svgIcon='ic_account_box_24px'>用于显示图标。 在视图中，该图标成功显示在导航栏上方。
• 打开app/crisis-center/crisis.list.component然后在视图中打开Crisis Center。
• 注意在模板中，存在相同的<md-icon> 。 但是，视图中的危机列表上方没有显示任何图标。 来自浏览器开发工具的DOM检查器显示，角度解析器甚至没有将其识别为角度分量（在dom中，它与代码中的内容完全一样）

因为我将图标模块和服务导入了根模块，所以我希望该服务是整个应用程序可用的单例。 由于我使用该服务在自举的AppComponent向iconRegistry.addSvgIconSet()注册图标， iconRegistry.addSvgIconSet()我希望整个应用程序都可以访问这些图标。

PS：这可能与我昨天的报道有关，尽管在这种情况下该应用程序崩溃了； 在这种情况下，图标不会显示。

Answer 1

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: [
      ]
    };
  }

}

Answer 2

（这是我在这里的帖子的转载，因为这两个问题实际上是相同的）

我发现，由于MdIconModule本身在其providers数组中具有MdIconRegistry服务，因此每次其他模块导入它时，都会提供该服务的新实例。 结果，所有在引导时加载的，属于同一AppModule共享此服务的相同实例。 但是，稍后加载（通过延迟加载）的组件具有该服务的不同实例，因此无法看到引导时注册的图标。

在James的帮助下 ，我使用了特制模块的解决方法，该模块完全不使用MdIconModule ，而是仅声明MdIcon类。 然后，我分别向根AppComponent单独提供MdIconRegistry服务。 结果是，整个应用程序范围内只有一个实例，并且在引导时注册的图标随处可见。

修改的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-Material Modules的这一限制已在alpha 8版本中修复