Angular 2 Résolvez le composant racine avant d'instancier les composants enfants

Question

Lorsque j'actualise mon application Web, je souhaite qu'elle demande les données de l'utilisateur connecté potentiel avant d'instancier des composants ou des itinéraires. Si les données de l'utilisateur ont été trouvées, je souhaite l'injecter dans un service dont dépendent tous mes autres sous-composants.

Scénario: Dites que j'ai 3 composants, App (ROOT), Accueil & À propos de. Si je place ce code dans mon composant About, je m'attends à attendre 20 secondes avant de l'instancier, le composant est instantanément instancié, seulement quand je m'éloigne de ce composant, il déclenche la fonction et j'attends 20 sec .

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
    return new Promise((res, rej) => { 
     setTimeout(function() { 
      res(true); 
     }, 20000) 
    }) 
} 

Idéalement je ne veux pas la volonté d'être connecté à une route, je veux la demande de la détermination dans le composant racine avant même instancier les routes.

Answer 1

Il existe en fait deux façons de le faire.

1) Soit vous pouvez étendre la classe Router-Outlet et pour chaque composant actif, vous pouvez attendre 20 secondes et traiter facilement les données des utilisateurs de singedIn (les deux peuvent être traitées dans un seul fichier ou un seul endroit). 2) OU dans un composant individuel, vous pouvez utiliser @CanActivate hook et attendre 20 secondes. Lorsqu'un composant est activé, vous pouvez injecter shareService (contient probablement un objet d'information utilisateur) dans le constructeur et faire d'autres choses.

Pour cela, vous pouvez utiliser @CanActivate dans le composant et attendre 20 secondes avant qu'il ne soit initialisé.

Si je place ce code dans mon propos composant, je me attends à attendre avant d' 20 secondes instancier, au contraire, le composant obtient instancié instantanément ...

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => { 
    return new Promise((res, rej) => { 
     setTimeout(function() { 
      res(true); 
     }, 20000) 
    }) 
})