Angular2 Bootstrap Providers 与在组件中提供数组

Question

首先，我们可能有一个不寻常的 Angular2 架构，我们在单个页面上引导多个组件(小部件)，而不是处理所有事情的单个应用程序组件。

我的第一个问题是，以下两个实现是否相同，根据我的理解，它们是(如果我误解了什么，请纠正我):

 bootstrap(SomeComponent, [HTTP_PROVIDER, FooService, ServiceNeededByFoo])

这会初始化 SomeComponent 并将三个服务的提供者放入其中。这样，SomeComponent 可以在其自己的构造函数中解析 FooService，并且 FooService 可以解析 ServiceNeededByFoo，因为它在 SomeComponent(父级)中查找它。

如果我定义

providers: [HTTP_PROVIDER, FooService, ServiceNeededByFoo]

在 SomeComponent 内部，我可以像这样初始化它:

bootstrap(SomeComponent)

因此，据我了解，这些应该是完全相同的，在 SomeComponent 级别上创建了 FooService 和 ServiceNeededByFoo 的新实例，并与也需要 FooService 的 SomeComponent 的所有子级共享。如果相同，有什么首选/推荐的方法吗？

现在第二个问题是，如何在不在同一 DI 层次结构中的组件之间共享 FooService 的单个实例:

bootstrap(SomeComponent1, FooService)
bootstrap(SomeComponent2, FooService)

其中 FooService 应该是同一个实例。像这样的东西:

var foo = new FooService();
foo.expensiveInit();
bootstrap(SomeComponent1, provide(FooService, {instance: foo}))
bootstrap(SomeComponent2, provide(FooService, {instance: foo}))

Answer 1

Angular DI 创建了一个注入(inject)器层次结构，其中根由 bootstrap() 创建，提供程序传递给 bootstrap()。
默认情况下 Angular 提供的所有内容也会添加到此注入(inject)器中(例如 PLATFORM_PIPES、PLATFORM_DIRECTIVES...)

然后从根组件开始，使用根组件提供的提供程序创建子注入(inject)器。对于根组件的每个子组件和指令，都会创建子注入(inject)器，一直到叶组件和指令。

因此，注入(inject)器层次结构类似于您的组件和指令层次结构。

现在，当组件需要依赖项(构造函数参数)时，DI 会在其注入(inject)器提供程序中查找它。如果找不到它，它会检查父注入(inject)器，并继续检查由 bootstrap() 创建的根注入(inject)器。

这应该非常清楚地表明 bootstrap() 处的提供程序或根组件处的提供程序会导致完全相同的行为。

您在两个单独引导的组件之间共享服务的方法对我来说似乎很好，除了据我所知它应该是 useValue 而不是 instance

bootstrap(SomeComponent1, provide(FooService, {useValue: foo}))

另请参阅

• How to dynamically create bootstrap modals as Angular2 components?

正如那里提到的，如果您使用共享服务中的可观察量发出值，则该值将在发送者区域中发出，并且在发送者区域中调用其他应用程序中的订阅者。确保您使用 zone.run

constructor(sharedService:FooService, zone:NgZone) {
  sharedService.someObservable.subscribe(value => {
    zone.run(() => {
      this.data = value;
      this.router.navigate...
      ...
    });
  });
}