Angular 2 Material: 来自同一文件的相同图标显示在一个组件中，而不是另一个

Question

我正在使用 Angular 2 rc 5 和 ng2-Material alpha 7-2。

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

重现问题

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

因为我将图标模块和服务导入到根模块中，所以我希望该服务是可用于整个应用程序的单例。由于我使用该服务在我的引导 AppComponent 中使用 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 服务，每次另一个模块导入它时，都会提供一个新的服务实例。因此，在 bootstrap 时间加载并且属于同一 AppModule 的所有组件共享该服务的同一个实例。但是，稍后加载的组件（通过延迟加载）具有 不同的 服务实例，因此无法看到在 bootstrap 时间注册的图标。

对于，我使用了一个特制模块的解决方法，它根本不使用 MdIconModule，而是单独声明 MdIcon class .然后我单独提供 MdIconRegistry 服务，并且只提供给根 AppComponent。结果是整个应用程序只有一个服务实例，并且在 bootstrap 时间注册的图标随处可用。

修改后的 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()。

此实现的详细信息can be seen here.

ng-Material 模块的限制是 fixed with the alpha 8 release

Angular 2 Material: 来自同一文件的相同图标显示在一个组件中，而不是另一个

Angular 2 Material: same icon from same file displays in one component, not the other

svg

angular2-material

angular