Question

我试图搜索，但我没有得到答案。

当我必须定义＆＃34;提供商＆＃34;时，我无法意识到。 @Component定义中的部分。我查看了一些例子。其中一半使用 1）

import { Component, blah-blah} from '@angular/core';
import { SomeService } from './some.service';

@Component({
  selector: 'example-selector',
  providers: [SomeService ],
.....
constructor(public someService : SomeService ,

2）但其中一半没有＆＃34;提供商＆＃34;部！

import { Component, blah-blah} from '@angular/core';
import { SomeService } from './some.service';

@Component({
  selector: 'example-selector',

.....
constructor(public someService : SomeService ,

===

所以，我很困惑：当我需要那个部分时，我什么时候不知道？

Answer 1

我认为它与您声明提供者的级别有关。您必须为您使用的每个组件或服务声明一个提供程序

例如，在我的应用程序中，我有一个我在main.ts中提供的服务，然后该服务可供任何组件使用，而无需在那里指明提供者。

＆＃13;

bootstrap(AppComponent, 
    [
        APP_ROUTER_PROVIDER, 
        HTTP_PROVIDERS, 
        SettingsService, 
        disableDeprecatedForms(), 
        provideForms()
    ]).catch((err: any) => console.error(err));



@Component({
    selector: 'kg-Settings ',
    templateUrl: './app/components/settings/settings.component.html',
    styleUrls: ['./app/components/settings/settings.component.css'],
    directives: [ROUTER_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})

＆＃13;

但是，如果我想将一个组件注入另一个组件，并且以前没有在应用程序树中提供更高级别的组件，

＆＃13;

@Component({
    selector: 'k-Calculator ',
    templateUrl: './app/components/calculator/calculator.component.html',
    styleUrls: ['./app/components/calculator/calculator.component.css'],
    directives: [ROUTER_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, Panel, Dropdown, SelectButton, Button],
    providers: [CalculationService]
})

＆＃13;

Answer 2

只要您需要在该组件中使用服务，就需要提供程序部分。

项目＃1，定义了组件中的提供者。

项目＃2，（可能）在app.component.ts中定义了提供者（请检查主文件）

Answer 3

我相信Maxouhell在the right answer中提供了another question：

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

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

Angular 2：当我需要组件中的提供者部分时？

3 个答案: