我想知道在 angular2 中设置可配置模块的最佳方法是什么。在 angular1 中，这通常是通过提供者完成的。随着它们发生了相当大的变化，您将如何将配置参数传递给可重用的 ng2 模块/指令/组件？

安ng1 example :

// configuring a (third party) module    
.config(function (angularPromiseButtonsProvider) {
  angularPromiseButtonsProvider.extendConfig({
    spinnerTpl: '<div class="other-class"></span>',
    disableBtn: false
  });
});

 // setting up the provider
.provider('angularPromiseButtons', function angularPromiseButtonsProvider() {
    var config = {
        spinnerTpl: '<span class="btn-spinner"></span>',
        priority: 0,
        disableBtn: true,
    };

    return {
        extendConfig: function(newConfig) {
            config = angular.extend(config, newConfig);
        },

        $get: function() {
            return {
                config: config
            };
        }
    };
})

// using the result in the directive, etc.
.directive('promiseBtn', function(angularPromiseButtons){
    var config = angularPromiseButtons.config;
})

这基本上与 this one 相同的问题但针对 angular2。

最佳答案

有几种配方，可以单独使用，也可以一起使用。

配置服务

通常需要有一项服务以键/值形式提供必要的配置。

可能有不止一种配置服务来配置一个应用程序实体，例如someConfig 用于通用的用户定义配置，someDefaultConfig 用于所有应该可能更改的默认值。例如，someConfig 可能包含始终由用户定义的身份验证凭据，someDefaultConfig 可能包含默认 Hook 回调、身份验证提供程序的深层设置等。最简单的方法实现它是将配置对象与 Object.assign 合并。

强制配置服务

需要用户显式定义配置服务的配方，它基本上使用 DI 来指定某些模块在没有正确配置的情况下将无法工作。

AngularJS

// third-party module
// will fail if someConfig wasn't defined by the user
angular.module('some', []).factory('someService', (someConfig) => { ... })

// user-defined module
angular.module('app', ['some']).constant('someConfig', { foo: 'foo' });

Angular

// third-party module
export const SOME_CONFIG = new InjectionToken('someConfig');

@Injectable
class SomeService {
  constructor(@Inject(SOME_CONFIG) someConfig) { ... }
}

@NgModule({ providers: [SomeService] })
export class SomeModule {}

// user-defined module
@NgModule({
  imports: [SomeModule],
  providers: [{ provide: SOME_CONFIG, useValue: { foo: 'foo' } }]
)
export class AppModule {}

具有可覆盖空值的可选配置服务

这与之前的配方略有不同，唯一的区别是如果用户未定义配置服务，则不会使应用程序失败的空默认值:

AngularJS

// third-party module
angular.module('some', [])
.constant('someConfig', {})
...

Angular

// third-party module
@NgModule({ providers: [..., { provide: SOME_CONFIG, useValue: {} }] })
export class SomeModule {}
...

可选配置服务

或者，配置服务可以完全可选以进行注入(inject)。

AngularJS

// third-party module
angular.module('some', []).factory('someService', ($injector) => {
  const someConfig = $injector.has('someConfig') ? $injector.get('someConfig') : {};
  ...
})
...

Angular

// third-party module
export const SOME_CONFIG = new InjectionToken('someConfig');

@Injectable
class SomeService {
  constructor(@Inject(SOME_CONFIG) @Optional() someConfig) {
    this.someConfig = someConfig !== null ? someConfig : {};
    ...
  }
}

@NgModule({ providers: [SomeService] })
export class SomeModule {}
...

forRoot 方法

forRoot 静态模块方法是 a convention紧随其后的是 Angular 路由器模块和众多第三方模块。 As explained in the guide ，该方法返回一个实现 ModuleWithProviders 的对象.

基本上，它提供了一个基于forRoot(...) 参数动态定义模块提供者的机会。这可以被认为是 AngularJS 中不存在的 config 和 provider 单元的替代品。

AngularJS

// third-party module
angular.module('some', [])
.constant('someDefaultConfig', { bar: 'bar' })
.provider('someService', function (someDefaultConfig) {
  let someMergedConfig;

  this.configure = (config) => {
    someMergedConfig = Object.assign({}, someDefaultConfig, config);
  };
  this.$get = ...
});

// user-defined module
angular.module('app', ['some']).config((someServiceProvider) => {
  someServiceProvider.configure({ foo: 'foo' });
});

Angular

// third-party module
export const SOME_CONFIG = new InjectionToken('someConfig');
export const SOME_DEFAULT_CONFIG = new InjectionToken('someDefaultConfig');

@Injectable
class SomeService {
  constructor(
    @Inject(SOME_CONFIG) someConfig,
    @Inject(SOME_DEFAULT_CONFIG) someDefaultConfig
  ) {
    this.someMergedConfig = Object.assign({}, someDefaultConfig, someConfig);
    ...
  }
}

@NgModule({ providers: [
  SomeService,
  { provide: SOME_DEFAULT_CONFIG, useValue { bar: 'bar' } }
] })
export class SomeModule {
  static forRoot(config): ModuleWithProviders {
    return {
      ngModule: SomeModule,
      providers: [{ provide: SOME_CONFIG, useValue: config }]
    };
  }
}

// user-defined module
@NgModule({ imports: [SomeModule.forRoot({ foo: 'foo' })] })
export class AppModule {}

APP_INITIALIZER 多 vendor

Angular APP_INITIALIZER多提供商允许为应用程序提供异步初始化例程。

APP_INITIALIZER 与 AngularJS 配置阶段有一些相似之处。 APP_INITIALIZER 例程容易受到竞争条件的影响，类似于 AngularJS 中的 config 和 run block 。例如，由于对另一个 APP_INITIALIZER 的循环依赖，Router 可用于在根组件中注入(inject)，但不能在 APP_INITIALIZER 中注入(inject)。

同步初始化例程

AngularJS

...
// user-defined module
angular.module('app', ['some']).config((someServiceProvider) => {
  someServiceProvider.configure({ foo: 'foo' });
});

Angular

...
// user-defined module
export function someAppInitializer(someService: SomeService) {
  return () => {
    someService.configure({ foo: 'foo' });
  };
}

@NgModule({
  imports: [SomeModule],
  providers: [{
    provide: APP_INITIALIZER,
    multi: true,
    useFactory: someAppInitializer,
    deps: [SomeService]
  }]
})
export class AppModule {}

异步初始化例程

初始化可能涉及从远程源获取配置以配置服务；单个 AngularJS 应用程序无法做到的事情。这需要有另一个应用程序来初始化和引导主模块。此场景自然由 APP_INITIALIZER 处理。

AngularJS

...
// user-defined module
angular.module('app', ['some']);

angular.module('appInitializer', [])
.factory('initializer', ($document, $http) => {
  return $http.get('data.json')
  .then((result) => result.data)
  .then((data) => {
    $document.ready(() => {
      angular.bootstrap($document.find('body'), ['app', (someServiceProvider) => {
        someServiceProvider.configure(data);
      }]);
    });
  });
});

angular.injector(['ng', 'appInitializer'])
.get('initializer')
.catch((err) => console.error(err));

Angular

...
// user-defined module
export function someAppInitializer(http: HttpClient, someService: SomeService) {
  return () => {
    return http.get('data.json').toPromise()
    .then(data => {
      someService.configure(data);
    });
  };
}

@NgModule({
  imports: [SomeModule],
  providers: [{
    provide: APP_INITIALIZER,
    multi: true,
    useFactory: someAppInitializer,
    deps: [HttpClient, SomeService]
  }]
})
export class AppModule {}

关于javascript - 我应该如何在 Angular2 中制作可配置模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43826348/