Angular 2 如何使单例服务可用于延迟加载的模块

Question

据我了解Angular 2 rc5 , 为了使来自另一个模块(不是 AppModule )的服务作为单个组件可用于每个组件，即使是那些延迟加载的组件，我们不将服务包含在 providers 中该其他模块的数组。我们改为使用 RouterModule.forRoot() 导出它并将结果导入 AppModule

According to the docs :

The SharedModule should only provide the UserService when imported by the root AppModule. The SharedModule.forRoot method helps us meet this challenge...the SharedModule does not have providers...When we add the SharedModule to the imports of the AppModule, we call forRoot. In doing so, the AppModule gains the exported classes and the SharedModule delivers the singleton UserService provider at the same time

我真的很纠结如何让延迟加载的路由可以使用第三方服务(由我的 imports 的 AppModule 数组中的模块使用的服务)。我无法控制这个第 3 方模块，所以我不能只从 NgModule.providers 中删除该服务。该模块的数组并将其放在 RouterModule.forRoot() 中就像我对我的一项服务一样。

具体服务为MdIconRegistry , 在 providers 中对于 MdIconModule的 Angular Material 2 alpha 7-3 .此服务用于注册 svg 图标，这些图标随后可以显示在带有 <md-icon svgIcon='iconName'> 的页面上。标签。所以:

• 我导入了 MdIconModule在我的根目录 AppModule
• 我使用相关服务在我的 AppComponent 中注册了 svg 图标

该图标可见且运行良好，但仅在启动时加载的模块中有效。延迟加载的模块看不到这些图标，所以我怀疑 Angular 注入(inject)器没有注入(inject) MdIconRegistry 的同一个实例。服务。

tl;dr:如何使第 3 方模块的服务成为我的延迟加载组件可用的单例？

Here is a plunker that demonstrates the problem (编码为 typescript )。

PS:这刚刚引起了 MdIconModule 的注意。开发商on github.

Answer 1

I do not think it has anything to do with the component being lazy-loaded.

LazyLoadedComponent 不是 AppModule 的一部分——它是 LazyModule 的一部分。根据文档，一个组件只能是一个模块的一部分。如果您尝试将 LazyLoadedComponent 也添加到 AppModule，您会得到一个错误。所以 LazyLoadedComponent 根本看不到 MdIconModule。您可以通过查看调试器中的模板输出来确认这一点——它没有改变。

<md-icon svgIcon="play"></md-icon>

解决方案似乎是将 MdIconModule 添加到 LazyModule，虽然这并不能解决问题，但确实会在输出中添加错误。

Error retrieving icon: Error: Unable to find icon with the name ":play"

模板输出现在看起来像这样，所以我们知道它正在加载。

<md-icon role="img" svgicon="play" ng-reflect-svg-icon="play" aria-label="play"></md-icon>

我从 LazyLoadedComponent 添加了对 addSvgIconSet 的调用，这让它开始工作……所以这证明每个组件都有一个 MdIconRegistry 服务实例——这不是您想要的，但可能会为您指明正确的方向。

这是新的亮点 - http://plnkr.co/edit/YDyJYu?p=preview

进一步查看后，我在 docs 中找到了这个:

Why is a service provided in a lazy loaded module visible only to that module?

Unlike providers of the modules loaded at launch, providers of lazy loaded modules are module-scoped.

最后更新!这是答案。 MdIconModule 没有为延迟加载的组件正确设置...但是我们可以轻松地创建我们自己的正确设置的模块并使用它。

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { MdIcon } from '@angular2-material/icon';
import { MdIconRegistry } from '@angular2-material/icon';

@NgModule({
  imports: [HttpModule],
  exports: [MdIcon],
  declarations: [MdIcon]
})
export class MdIconModuleWithProviders {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MdIconModuleWithProviders,
      providers: [ MdIconRegistry ]
    };
  }
}

Plunk 已更新并完全正常工作。 (抱歉，更新了同一个)-> http://plnkr.co/edit/YDyJYu?p=preview

可以提交拉取请求，以便 Angular Material 导出两种样式的模块。