Angular 2中的组件装饰器和NgModule装饰器的提供程序之间的差异

Question

providers array of Component decorator

@Component({
    moduleId: module.id,
    selector:    'hero-list',
    templateUrl: './hero-list.component.html',
    providers:  [ HeroService ]
 })
 export class HeroListComponent implements OnInit {
    /* . . . */
 }

providers array of NgModule decorator

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

What is difference between these two providers array in Angular2?

Answer 1

The difference is the scope where a provider is available and how many instances will be created.

instance per provider

If you add it to a component, every instance of this component will have it's own instance of the services, while for non-lazy-loaded modules there will only be a single instance for the whole application.

scope

If you add it to a component, only the component and directives applied to it, and the descendants of this component will be able to inject an instance.

hierarchical injection and provider lookup

When a component injects a service, DI looks it up by checking the components providers, then its parent, and further ancestors until it finds a matching provider. If it can't find one when the root component ( AppComponent ) is reached it looks at the applications root scope ( @NgModule() ).

lazy loaded modules

Lazy loaded modules have their own "root" scope. This was introduced because providers of an injector can't be modified once initialized and lazy modules are not available initially. Therefore providers of lazy loaded modules won't become available globally, only within the scope of the lazy loaded module. To work around this limitation forRoot() was introduced (mostly a convention instead of some feature) to register providers in the root scoope while keeping the rest of the imported module lazy.