Destruction du composant

Objectifs de ce chapitre

• ✔️
  Apprenez le fonctionnement de destruction un composant

  Comprenez ce qui se passe lorsque vous quittez un composant dans une application Angular.

Au moment où vous soumettez le formulaire, la propriété task du TaskFormComponent est renseignée avec les valeurs que vous avez saisies dans le formulaire. Par exemple, étant donné que vous avez rempli les champs nom et description, la propriété task sera :

task = {
  title: 'Ma nouvelle tâche',
  description: 'Votre belle description.'
};

En soumettant le formulaire et naviguant vers une nouvelle page, vous quittez également le composant TaskFormComponent. Lorsque vous quittez un composant, celui-ci est détruit.

Ainsi, en naviguant à nouveau vers ce formulaire, la propriété task sera vide :

task = {
  title: '',
  description: ''
};

Une nouvelle instance du composant TaskFormComponent est créée à chaque fois que vous y accédez. Ainsi, tout état local que vous définissez dans le composant est perdu lorsque vous naviguez sur une autre route.

Astuce

C’est pourquoi vous utilisez le service TaskService pour stocker la nouvelle tâche. Le service est un singleton, ce qui signifie qu’il s’agit d’une instance unique partagée dans l’application. Sauf si vous forcez le rechargement de l’application dans le navigateur, les tâches que vous avez ajoutées seront conservées.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris le fonctionnement de destruction de composants dans une application Angular.