如何注册要在不同模块和组件中使用的md-icon（Material2）

Question

我的应用程序中有3个模块，我想在不同的html页面中呈现图标。 我有一个资产文件夹，其中有icon-set.svg文件。

目前，我可以通过在app.module.ts文件中注册mdIconRegistry在我的app.component.html页面中呈现图标。

export class AppModule {
constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: 
DomSanitizer) {

    mdIconRegistry.addSvgIcon('settings',sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg'))
 }
}

我希望在另一个位于模块navbar.module.ts中的html页面中呈现图标。 在app.module.ts中注册mdIconRegistry后，图标不会在navbar.component.html中呈现。

我必须再次在navabar.module.ts中显式编写构造函数代码，如下所示，以获得所需的输出。

 export class NavbarModule {
 constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: 
DomSanitizer) {

  mdIconRegistry.addSvgIcon('settings',sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg'))

}
 }

是否有更好的方法可以全局执行此操作，而不是针对不同的模块一次又一次重写构造函数代码。

Answer 1

只需在AppModule注册图标：

@NgModule([
    imports: [
        MdIconModule
    ]
])
export class AppModule {
    constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: DomSanitizer) {
        mdIconRegistry.addSvgIcon('settings', sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg'));
    }
}

Answer 2

我所做的是将图标注册到我的app.component.ts中 ，如下所示：

export class AppComponent implements OnInit {
  constructor(private mdIconRegistry: MdIconRegistry,
              private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.mdIconRegistry.addSvgIconInNamespace('namespace', 'icon-name',
      this.sanitizer.bypassSecurityTrustResourceUrl('path-to-icon.svg')
    );
  }

}

在我的app.module.ts中 ，我正在导入MdIconModule ，但是您还必须在每个子模块中导入MdIconModule （无需再次注册自定义图标）

你可以考虑具有SharedModule是进口/出口的材料成分，并且只导入每个子模块的新SharedModule（包括app.module）