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

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

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

我在根 AppModule

MdIconModule

我使用相关服务在我的 AppComponent

该图标可见且运行良好，但仅在启动时加载的模块中有效。延迟加载的模块看不到这些图标，所以我怀疑 Angular 注入器没有注入 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 导出两种样式的模块。

Answer 2

Angular6 的新功能有一种将提供程序注册为单例的新方法。在服务的 @Injectable() 装饰器中，使用 providedIn 属性。将其值设置为 'root'。然后你不需要将它添加到根模块的提供者列表中，或者在这种情况下你也可以将它设置到你的 MdIconModuleWithProviders 模块中，如下所示：

@Injectable({
  providedIn: MdIconModuleWithProviders // or 'root' for singleton
})
export class MdIconRegistry {
...

Angular 2 如何使单例服务对惰性加载模块可用

Angular 2 How to make singleton service available to lazy loaded modules

angular

typescript

module

angular2-services