Pourquoi utiliseriez-vous un résolvateur avec Angular

Question

J'aime l'idée d' resolvers.

On peut dire que:
- pour un itinéraire donné vous attendre à des données d'être chargé en premier
- vous pouvez juste avoir un très simple composant avec non observables (comme la récupération de données à partir d' this.route.snapshot.data)

Donc résolveurs fait beaucoup de sens.

MAIS:
- Vous n'êtes pas changer l'URL et l'affichage de votre composant demandé jusqu'à ce que vous recevez la réponse réelle. Donc vous ne pouvez pas (simplement) montrer à l'utilisateur que quelque chose se passe par le rendu de votre composant et montrant autant que vous le pouvez (tout comme il est conseillé, pour le shell application avec PWA). Ce qui signifie que quand on a une mauvaise connexion, l'utilisateur peut-être juste attendre sans indication visuelle de ce qui se passe pendant une longue période
- Si vous utilisez un programme de résolution sur une route avec des param, prenons comme exemple l' users/1, ça marchera très bien la première fois. Mais si vous allez à l' users/2, eh bien il ne se passera rien, sauf si vous commencez à utiliser une autre observable: this.route.data.subscribe()

Il se sent comme outils de résolution pourrait être utile de récupérer des données, MAIS dans la pratique je ne voudrais pas utiliser en cas d'un réseau lent et en particulier pour les routes avec des params.

Suis-je manqué quelque chose? Est-il un moyen de les utiliser avec ces contraintes réelles?

Answer 1

De résolution: Il est exécuté avant même que l'utilisateur est dirigé vers une nouvelle page.

Chaque fois que vous avez besoin pour obtenir les données avant l'initialisation du composant, la bonne façon de faire est d'utiliser le résolveur. De résolution des actes de façon synchrone c'est à dire résolveur va attendre async appel et seulement après le traitement de l'appel asynchrone, il prendra le chemin de l'URL. Ainsi, l'initialisation du composant attendrai jusqu'à ce que le rappel est terminé. Donc, si vous voulez faire quelque chose (appel de service), même avant que le composant est initialisé, vous êtes venus au bon endroit.

Exemple de Scénario: je travaillais sur le projet, où l'utilisateur serait de passer le nom du fichier à charger dans l'URL. Basé sur le nom passé, nous le ferions à l'appel asynchrone dans ngOnInit et obtenir le fichier. Mais le problème c'est que si l'utilisateur passe le nom incorrect dans l'URL, notre service de tenter de récupérer le fichier qui n'existe pas sur le serveur. Nous avons 2 option dans un tel scénario:

Option 1: Pour obtenir la liste de validité des noms de fichiers dans ngOnInit, et ensuite appeler le service d'extraire le fichier (Si le nom de fichier est valide). Deux de ces appels doivent être synchrones.

Option 2: Récupérer la liste de validité des noms de fichiers dans l'outil de résolution, vérifiez si le nom de fichier dans l'URL est valide ou non, et de récupérer le fichier de données.

L'Option 2 est un meilleur choix, puisqu'résolveur gère la synchronisation des appels.

Important: Utilisez de résolution lorsque vous souhaitez récupérer les données avant même que l'utilisateur est dirigé vers l'URL. Résolveur pourrait inclure les appels de service qui nous amènerait les données nécessaires pour charger la page suivante.

Answer 2

C'est pourquoi je voudrais utiliser un résolveur:

• La Responsabilité unique, mon composant a besoin de quelques données, dans certains cas, ces données sont fournies par un cache ou de l'état, lorsque manque j'ai besoin d'abord de les récupérer, et de passer directement, sans changer mon composant. Exemple: Une page de Résultat de Recherche avec une liste myapp.com/lists, accédez à un élément de la liste myapp.com/lists/1, montrant les détails de cet élément, pas besoin de récupérer les données, a déjà fait par la recherche. Ensuite, supposons que vous accédez directement à l' myapp.com/lists/1 vous avez besoin de récupérer, puis naviguez vers le composant
• Isoler votre composant de routeur logique
• Mon composant ne doit pas gérer le chargement de l'état d'une demande de récupération, c'est de la seule responsabilité est de montrer les données

Pensez à le resolver comme un middleware entre votre application et de votre composant, vous pouvez gérer le chargement de la vue du composant parent, où <router-outlet> est inclus.

Answer 3

En fait, je refactorise actuellement une application qui utilise beaucoup de résolveurs, pensé à eux beaucoup et pense que le plus gros problème avec eux, c'est qu'ils mutent les données, vous devez cartographier les données récupérées à partir activatedRoute. En d'autres termes, il ajoute des complexités et des problèmes dans le maintien de l'application, tandis que l'injection de service direct n'a pas ce problème .... En outre, parce que les résolveurs sont synchrones, dans la plupart des cas, l'expérience utilisateur vraiment ralentir ...

Answer 4

Le résolveur vous donne un crochet près du début de routeur de navigation et il vous permet de contrôler la navigation tentative. Cela vous donne beaucoup de liberté, mais pas beaucoup de règles strictes et rapides.

Vous n'avez pas à utiliser le résultat de la résoudre dans votre composant. Vous pouvez simplement utiliser le résoudre comme un crochet. C'est ma manière préférée de l'utiliser pour les raisons que vous avez cité. En utilisant le résultat dans votre composant est beaucoup plus simple, mais il a ces synchrone compromis.

Par exemple, si vous utilisez quelque chose comme Matériel ou Cdk, vous pouvez envoyer un "chargement" de dialogue pour afficher un indicateur de progression au début de la résoudre, puis fermez la boîte de dialogue lorsque le résoudre conclut. Comme suit:

constructor(route: ActivatedRouteSnapshot, myService: MyService, dialog: MatDialog) {}

resolve() {
    const dialogRef = this.dialog.open(ProgressComponent);
    return this.myService.getMyImportantData().pipe(
        tap(data => this.myService.storeData(data)),
        tap(() => dialogRef.close()),
        map(() => true),
        catchError(err => of(false))
    );
}

Si vous utilisez ngrx, vous pourriez faire quelque chose de similaire par l'envoi d'actions, tandis que la résolution est en cours.

Lorsque vous êtes à l'aide de la détermination de la garde dans ce mode, il n'y a pas particulièrement de raison d'utiliser le Résoudre de la garde au lieu de la CanActivate de la garde. Ce choix revient à la sémantique. Je le trouve plus évident à la porte de l'authentification sur CanActivate et de lancer la récupération de données à partir de Résoudre. Lorsque ces sujets sont autorisés à mélange, il devient un abritrary choix.