我想知道在angular2中设置可配置模块的最佳方法是什么。在angular1中，这通常是通过提供商完成的。随着它们的改变，你会如何将配置参数传递给可重用的ng2模块/指令/组件？
// 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。
答案 0 :(得分：13)
有几种配方，可以单独使用或一起使用。
通常需要提供以键/值形式提供必要配置的服务。
可能有多个配置服务来配置一个应用程序实体，例如someConfig用于通用的用户定义配置，someDefaultConfig用于应该可能更改的所有默认值。例如，someConfig可能包含始终由用户定义的身份验证凭据，someDefaultConfig可能包含默认的挂钩回调，auth提供程序的深层设置等。实现此目的的最简单方法是合并配置具有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' });
<强>角
// 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', {})
...
<强>角
// third-party module
@NgModule({ providers: [..., { provide: SOME_CONFIG, useValue: {} }] })
export class SomeModule {}
...
或者，可以使配置服务完全可选用于注射。
<强> AngularJS
// third-party module
angular.module('some', []).factory('someService', ($injector) => {
const someConfig = $injector.has('someConfig') ? $injector.get('someConfig') : {};
...
})
...
<强>角
// 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静态模块方法是a convention，其后是Angular路由器模块和众多第三方模块。 As explained in the guide，该方法返回一个实现ModuleWithProviders的对象。
基本上，它提供了基于forRoot(...)参数动态定义模块提供程序的机会。这可以被视为Angular中不存在的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' });
});
<强>角
// 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 {}
Angular APP_INITIALIZER多提供程序允许为应用程序提供异步初始化例程。
APP_INITIALIZER与AngularJS配置阶段有一些相似之处。 APP_INITIALIZER例程易受竞争条件的影响，与AngularJS中的config和run块类似。例如，由于对另一个Router的循环依赖，APP_INITIALIZER可以在根组件中注入，但不能在APP_INITIALIZER中注入。
<强> AngularJS
...
// user-defined module
angular.module('app', ['some']).config((someServiceProvider) => {
someServiceProvider.configure({ foo: 'foo' });
});
<强>角
...
// 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));
<强>角
...
// 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 {}