0

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

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

复制问题

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

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

PS：这可能与我昨天报道的有关，虽然在那种情况下应用程序崩溃了；在这种情况下，图标只是不显示。

4

2 回答 2

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

}
于 2016-08-20T06:31:01.280 回答
0

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

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

在James 的帮助下MdIconModule，我使用了一个完全不使用，而是MdIcon单独声明类的特制模块的解决方法。然后我单独提供MdIconRegistry服务，并且只提供给 root 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-Material Modules 的这种限制已在 alpha 8 版本中修复

于 2016-08-20T12:40:50.813 回答