1

我有一个客户端 Angular2 应用程序，它将使用需要配置数据的第 3 方 NgModule 应用程序。我需要将配置值作为服务的静态属性提供，该服务在 3rd 方 NgModule 的不同区域中被调用。

客户端应用的 App.Module：

    export const MediaConfig: MediaConfigInterface =
    {
        MediaUrlRoot: "XXXXXXXXXXXXXXXXXXXXXX",
        Key: "YYYYYYYYYYYYYYYY"
    };


    //app.module.ts
    import { MediaModule } from '....';
    import { MediaConfig } from './configs';

    @NgModule(
    {
        imports: 
        [
            ...
            //3rd PARTY
            MediaModule.forRoot(MediaConfig),
            ...
        ],
        declarations:[...],
        providers:[...],
        bootstrap:[...]
    })
    export class AppModule { }

3rd 方 NgModule 被导入客户端应用程序：

    export const CONFIG_DATA = new OpaqueToken('Config Data');
    export function configHelperFactory(config: MediaConfigInterface) 
    {
        ClientConfigService.ConfigModel = config;
        return ClientConfigService;
    }

    @NgModule({
        imports:[...],
        declarations:[...],
        exports:[...],
        entryComponents:[...],
        providers:[]
    })
    export class MediaModule
    {
        static forRoot(config: MediaConfigInterface): ModuleWithProviders
        {       
            return {
                ngModule: MediaModule,
                providers:
                [
                    ClientConfigService,
                    {
                        provide: CONFIG_DATA,
                        useValue: config
                    },
                    {
                        provide: ClientConfigService,
                        useFactory: configHelperFactory,
                        deps: [CONFIG_DATA]
                    }               
                ]
            };
        }
    }

第 3 方 NgModules 静态服务，包含来自客户端应用程序的配置数据：

    import { MediaConfigInterface} from "../models";

    export class ClientConfigService 
    {
        static ConfigModel: MediaConfigInterface;

        static BuildMediaUrl(id: string) : string
        { 
            return '';
        };      
    }

只有当我在客户端应用程序的任何组件构造函数中导入 ClientConfigService 时，这种方法才有效（我目前正在 app.component.ts 中导入它）。在构造函数中导入它会导致第 3 方 NgModule 中的 configHelperFactory 触发，从而使用配置数据设置静态属性。

这种方法有效，客户端应用程序使用 AOT 构建。问题是在 App.Module 中设置配置数据并在任何给定组件的构造函数中导入 ClientConfigService 以使 configHelperFactory 触发有点麻烦。

有没有办法将配置数据传递到第 3 方 NgModule，使用配置数据填充静态服务属性，并能够使用 AOT 构建客户端应用程序？

4

0 回答 0