Question

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

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

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

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

我希望在另一个位于模块中的html页面中渲染图标，即navbar.module.ts。在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'))

}
 }

有没有更好的方法来全局执行，而不是一次又一次地为不同的mdoules重新编写构造函数代码。

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 ）

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

2 个答案: