引导多个根模块，每个模块都有不同的提供者（从外部提供）答案

【问题标题】：Bootstrap multiple root modules each with different providers (provided from outside)引导多个根模块，每个模块都有不同的提供者（从外部提供）
【发布时间】：2016-10-19 21:32:08
【问题描述】：

我的应用程序不是 SPA，但我在页面的某些部分使用 Angular 2。我创建了多个根模块，我使用包含来自外部世界的信息的可注入提供程序进行引导：

根模块 1：

let serviceOne = new ServiceOne("SuperImportantInfoFromSomewhere");
let providers: any = [{ provide: ServiceOne, useValue: serviceOne }];
platformBrowserDynamic(MyFirstRootModule, providers);

根模块 2，位于页面底部：

let serviceTwo = new ServiceTwo(42);
let providers: any = [{ provide: ServiceTwo, useValue: serviceTwo }];
platformBrowserDynamic(MySecondRootModule, providers);

很遗憾，这不起作用。当我想将ServiceTwo 注入到组件中时，它会失败。它仅在我在第一次引导时提供这两种服务时才有效（在本例中为MyFirstRootModule）。一定是和我不太了解的新 DI 系统有关。

由于我在 CMS 中工作，因此我在第一次引导时并不了解所有提供商；这两个模块甚至互不认识。

有没有办法完全分离这两个模块，或者在第一个根模块被引导后以某种方式向 DI 系统提供第二个服务？

【问题讨论】：

重要的是两者的引导组件。毕竟对于 Angular 2 来说，它看起来不是一个好的用例。
你是对的，他们在通往 2.0 的路上留下了一些用例。伤心。
您的方法可能有更好的替代方案。如果第二个模块的根组件是第一个模块的根组件的子组件，这就是实际问题。请详细说明您的情况，MCVE 会很好。

标签： angular

【解决方案1】：

我想出了一个非常肮脏的解决方法。在引导模块之前，我使用 Reflect API 将提供程序直接添加到类的注释中：

import "reflect-metadata";
import { MySecondRootModule } from "MySecondRootModule";
import { ServiceTwo } from "ServiceTwo";

export class MySecondRootApplication
{
    constructor()
    {
        let serviceTwo = new ServiceTwo(42);
        let annotations: Array<any> = (Reflect as any).getMetadata("annotations", MySecondRootModule);      

        if (annotations[0].providers != undefined)
        {
            annotations[0].providers.push({ provide: ServiceTwo, useValue: serviceTwo });
        }
        else
        {
            annotations[0].providers = [{ provide: ServiceTwo, useValue: serviceTwo }];
        }

        (Reflect as any).defineMetadata("annotations", annotations, type);

        // Perform what ever else needs to be done

        platformBrowserDynamic(MySecondRootModule);
    }
}

我知道，这很糟糕。但它有效。顺便说一句：使用此方法还可以更改 templateUrl，例如，如果您想使用 ASP.NET MVC 部分视图结果。

【讨论】：