组件提供商和模块提供商的差异

时间:2017-02-06 15:02:00

标签: angular

@Components providers属性与@Module providers之间的区别是什么?

两者都代表什么?

修改

我有两个组成部分:LoginComponentSigninComponent。另一方面,我使用自定义库中的UserService。此UserService服务正在寻找一个opaquetoken BASE_PATH

@Injectable()
export class UsersService {
    constructor(@Optional()@Inject(BASE_PATH)

BASE_PATH是:

export const BASE_PATH = new OpaqueToken('basePath');

此opaqueToken在AppModule上设置:

@NgModule({
  bootstrap: [ App ],
  declarations: [
    App,
    ErrorComponent
  ],
  providers: [
    ENV_PROVIDERS,

根据ENV_PROVIDERS上的环境设置设置environtment.ts

if ('production' === ENV) {
  enableProdMode();

  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in production
    { provide: BASE_PATH, useValue: 'http://public.sample.com:8082/commty/cmng' }
  ];

} else {

  // Development
  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in development
    { provide: BASE_PATH, useValue: 'http://localhost:8082/commty/cmng' }
  ];

}

export const ENV_PROVIDERS = [
  ...PROVIDERS
];

我正在设置所有:

@NgModule({
  declarations: [
    SigninComponent
  ],
  providers: [ UsersService ]
})
export default class SigninModule {

@NgModule({
  declarations: [
    LoginComponent
  ],
  providers: [ UsersService ]
})
export default class LoginModule {

因此,在组件上,我不会将任何服务作为提供者导入,我只是声明它们。

然而,当我加载SigninModule时,我的所有网络请求都会发送到localhost。但是,当我将LoginModule次请求发送到localhost:8282

2 个答案:

答案 0 :(得分:18)

如果您在组件内提供服务,它将是本地服务。 因此,如果您有两个组件实例,那么您将拥有两个服务实例。

现在,如果您在模块中提供服务,它将是全局的,如果您有两个组件实例,它们将共享相同的服务实例。

告诉我,如果你不明白,我会提供一个关于plunker的例子。

答案 1 :(得分:2)

引自官方文件:

  

一方面,NgModule中的提供程序在根目录中注册   注射器。这意味着每个提供商都在NgModule中注册   将在整个申请中提供。

另一方面,在应用程序组件中注册的提供程序仅在该组件及其所有子组件上可用。

https://angular.io/guide/dependency-injection#when-to-use-ngmodule-versus-an-application-component