web-dev-qa-db-fra.com

ngOnInit n'étant pas appelé lorsque la classe Injectable est instanciée

Pourquoi la fonction ngOnInit() n'est-elle pas appelée lorsqu'une classe Injectable est résolue?

Code

import {Injectable, OnInit} from 'angular2/core';
import { RestApiService, RestRequest } from './rest-api.service';

@Injectable()
export class MovieDbService implements OnInit {

    constructor(private _movieDbRest: RestApiService){
        window.console.log('FROM constructor()');
    }

    ngOnInit() {
         window.console.log('FROM ngOnInit()');
    }

}

sortie console

FROM constructor()
javascriptangulartypescript
170
Levi Fuller

Lifecycle hooks , comme OnInit() fonctionne avec les directives et les composants. Ils ne fonctionnent pas avec d'autres types, comme un service dans votre cas. De docs:

Un composant a un cycle de vie géré par Angular lui-même. Angular le crée, le restitue, crée et restitue ses enfants, le vérifie lorsque ses propriétés liées aux données changent et le détruit avant de le retirer du DOM.

Les instances de directive et de composant ont un cycle de vie au moment où Angular les crée, les met à jour et les détruit.

262
Sasxa

Je ne connais pas tous les crochets du cycle de vie, mais en ce qui concerne la destruction, ngOnDestroy est en fait appelé sur Injectable lorsque son fournisseur est détruit (par exemple, un Injectable fourni par un composant).

À partir de docs :

Le hook Lifecycle qui est appelé lorsqu'une directive, un tuyau ou un service est détruit.

Juste au cas où quelqu'un serait intéressé par destruction , cochez this question:

43
SBD580

Remarque: cette réponse s'applique uniquement à Angular composants et directives, PAS services.

J'ai eu le même problème lorsque ngOnInit (et d'autres crochets du cycle de vie) ne fonctionnaient pas pour mes composants, et la plupart des recherches m'ont conduit ici.

Le problème est que j'utilisais la syntaxe de la fonction de flèche (=>) comme ceci:

class MyComponent implements OnInit {
    // Bad: do not use arrow function
    public ngOnInit = () => {
        console.log("ngOnInit");
    }
}

Apparemment, cela ne fonctionne pas dans Angular 6. L'utilisation d'une syntaxe de fonction non flèche résout le problème:

class MyComponent implements OnInit {
    public ngOnInit() {
        console.log("ngOnInit");
    }
}
2
AJ Richardson

Dans votre service, vous pouvez utiliser resolvers dans le même but, comme expliqué dans cet article: https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

Pour comprendre l'utilisation des résolveurs, Voyons comment se déroule le flux lorsque quelqu'un clique sur le lien.

Flux de routage général.

  • L'utilisateur clique sur le lien.
  • Angular charge le composant respectif.

Flux de routage avec résolveur

  • L'utilisateur clique sur le lien.

  • Angular exécute certains codes et renvoie une valeur ou observable.

  • Vous pouvez collecter la valeur renvoyée ou observable dans le constructeur ou dans ngOnInit, en classe de votre composant sur le point de se charger.

  • Utilisez les données collectées pour vos besoins.

  • Vous pouvez maintenant charger votre composant.

Les étapes 2, 3 et 4 sont effectuées avec un code appelé résolveur.

0
118218