Angular 4: Le service doit-il être importé dans le composant?

Question

J'apprends l'angulaire 4, j'ai enregistré mon service dans la liste du fournisseur du app.module.ts.

Voici l'exemple de code: -

app.module.ts

import { FruitService } from './main/fruit.service'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import { MainComponent } from './main/main.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    MainComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    providers: [ 
     FruitService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

fruit.service.ts

export class FruitService { 
    getFruits() { 
     return ['apple', 'mango', 'banana']; 
    } 
} 

main.component.ts

// import { FruitService } from './fruit.service'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'main', 
    templateUrl: './main.component.html', 
    styleUrls: ['./main.component.css'] 
}) 
export class MainComponent implements OnInit { 
    fruits; 

    constructor(frts: FruitService) { 
     this.fruits = frts.getFruits(); 
    } 
} 

Le compilateur émet l'erreur suivante: -

Failed to compile. 

/home/user/Projects/ng4app/src/app/app.component.ts (12,20): Cannot find name 'FruitService'. 

Cependant, je ne peux pas utiliser le service sans avoir d'abord l'importer d'abord dans le composant. N'est-il pas supposé être disponible globalement une fois qu'il a été enregistré dans app.module?

Answer 1

Vous en avez besoin dans l'app.module, à cause de l'injection de dépendance. Cependant, cela ne signifie pas que vous n'avez pas besoin de l'importer dans chaque composant.

L'importation dans l'app.module fera en sorte que cette instance sera disponible globalement pour l'importation.