1

構成データを必要とするサードパーティの NgModule アプリを使用するクライアント Angular2 アプリがあります。サード パーティの 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 { }

クライアントアプリにインポートされているサードパーティの 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]
                    }               
                ]
            };
        }
    }

クライアント アプリからの構成データを含むサード パーティの NgModules 静的サービス:

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

    export class ClientConfigService 
    {
        static ConfigModel: MediaConfigInterface;

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

このアプローチは、クライアント アプリの任意のコンポーネント コンストラクターに ClientConfigService をインポートした場合にのみ機能します (現在、app.component.ts にインポートしています)。コンストラクターにインポートすると、サードパーティの NgModule の configHelperFactory が起動し、構成データで静的プロパティが設定されます。

このアプローチは機能し、クライアント アプリは AOT でビルドされます。問題は、構成データを App.Module に設定し、特定のコンポーネントのコンストラクターに ClientConfigService をインポートして、configHelperFactory が起動するのが少し面倒なことです。

構成データをサードパーティの NgModule に渡し、静的サービス プロパティに構成データを入力し、AOT でクライアント アプリを構築できる方法はありますか?

4

0 に答える 0