web-dev-qa-db-fra.com

Quel est le cycle de vie d'un service dans Angular 5

angulaire 5

Quand un service est-il créé et détruit, quels sont ses crochets de cycle de vie (le cas échéant) et comment ses données sont-elles partagées entre les composants?

EDIT: Pour clarifier, ceci estPASune question sur le cycle de vie des composants. Cette question concerne le cycle de vie des services. Si un service n'a pas de cycle de vie, comment le flux de données entre composants et services est-il géré?

angularlifecycleangular-services
9
Rahul Saha

Le service peut avoir 2 portées.

Si le service est déclaré sur votre module, vous avez la même instance partagée pour tous. Cela signifie que le service sera construit lors de la création du premier composant/directive/service/canal qui en a besoin. Ensuite, nous serons détruits quand Module lui-même sera détruit (la plupart du temps lorsque la page est déchargée)

si le service est déclaré sur Composant/Directive/Tuyau, une instance sera créée à chaque fois que le composant/Directive/Tuyau sera créé et sera détruite lorsque le composant/la directive/le tuyau concerné sera détruit.

Vous pouvez le voir en action

Test de code: 2 services sont créés pour montrer quand est créé/détruit.

@NgModule({
  providers: [GlobalService] // This means lifeCycle is related to the Module, and only one instance is created for all the module. Will be created only when the first element who need it will be created.
})
export class AppModule { }

Le service Seconde est un service de composant local, sera créé pour chaque instance hello-component créée et détruit juste avant que hello-component soit détruit.

@Injectable()
export class LocalService implements OnDestroy{
  constructor() {
    console.log('localService is construct');
  }

  ngOnDestroy() {
    console.log('localService is destroy');
  }
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [LocalService]
})
export class HelloComponent implements OnInit, OnDestroy {
  @Input() name: string;

  constructor(private localService: LocalService, private globalService: GlobalService) {}

  ngOnInit(){
    console.log('hello component init');
  }

  ngOnDestroy() {
    console.log('hello component destroy');
  }
}

Comme vous pouvez le constater, Service dans angulaire peut avoir OnDestroy crochet de cycle de vie.

8
Yanis-git

Le service est semblable au composant dans Angular avec les métadonnées @Injectable. Par conséquent, le cycle des cycles de vie du service est similaire au cycle de vie du composant dans Angular. Je n’ai pas essayé jusqu’à présent, mais je suppose que vous pouvez appeler toutes les méthodes/tous les raccrochés dans le service, comme ngOnInitngOnDestroy etc.

Dans Angular, tous les hooks de cycle de vie sont déclenchés dans le cadre de la détection des modifications par le framework. 

En détail, vous pouvez vous référer aux documents officiels ici 

0
Pardeep Jain

Les services ne vivent que dans la portée de leurs fournisseurs, donc dans la portée d'un module ou d'un composant unique. Ils sont instanciés lors de la première injection et maintenus en vie tant que le fournisseur existe.

Les services étant des classes normales, les hooks de cycle de vie angulaire ne leur sont pas applicables. 

0
Fussel