web-dev-qa-db-fra.com

Routage dynamique basé sur des données externes

Je travaille sur une application qui doit configurer des itinéraires en fonction d'une source de données externe. Le cycle de vie de l'application ressemble à ceci:

  • ng2 inits avec App
  • Une application contient un en-tête, un routeur-prise et un pied de page
  • la route par défaut est configurée sur homeComponent
  • homeComponent a des catégoriesListeComposant
  • categoriesListComponent appelle une méthode get à partir de categoriesService
  • categoriesService récupère une liste de catégories de l'API
  • categoriesComponent restitue la liste et réinjecte de nouvelles routes pour chaque catégorie dans App via un routeConfigurator

Il y a en fait une autre couche d'abstraction avec un serviceService mais ce n'est pas nécessaire pour cet exemple

Cette partie fonctionne, puisque nous avons commencé à la page d'accueil, l'appel de l'API a été effectué et a créé la variable routerConfigs pour chaque catégorie. Ainsi, lorsque l'utilisateur clique sur une catégorie, la route est déjà configurée avec la bonne variable categoryComponent + metadata et les informations correctes sont affichées.

Cependant, si vous accédez directement à une page de catégorie spécifique, ng2 ne dispose pas encore de la variable routerConfig pour cette route, puisque l'appel de l'API n'a rien renvoyé, et encore moins qu'il est déclenché. Ng2 affiche simplement l'application de base avec en-tête, pied de page et un routeur-prise vide.

La seule solution à laquelle je puisse penser est plutôt "hacky". Conservez un fichier JSON en cache sur le serveur d'applications et chargez-le dans le code HTML initial, puis injectez-le dans un service sur ng2 bootstrap/init. De cette façon, les itinéraires sont configurés avant même que ng2 soit rendu à la page.

Je demande d’autres suggestions, peut-être une personne avec un peu plus d’expérience ng2 que je peux expliquer. Peut-être que cela a déjà été résolu et que je n’ai pas encore suffisamment perfectionné mon google-fu.

Merci d'avance.

angularangular2-routing
18
Vitaliy Isikov

Dans le nouveau routeur (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchorresetConfig peut être utilisé pour charger de nouvelles routes

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

Vous auriez une directive routerLink personnalisée ou juste un lien ou un bouton qui appelle un gestionnaire d’événements au clic, lorsque les nouveaux itinéraires sont chargés, puis que router.navigate(...) est appelé pour accéder à l’itinéraire approprié.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 fournit un RC.6 Plunker

16
Günter Zöchbauer

Je ne sais pas si l’un des commentaires ci-dessus est votre solution du résultat que vous vouliez, mais j’ai une nouvelle méthode qui pourrait vous intéresser, ainsi que d’autres développeurs.

J'ai créé un fichier javascript dans lequel j'ajoute mes itinéraires.

"use strict";
const home_component_1 = require("location javascript component file");
exports.DYNAMIC_ROUTES = [
    { path: '', component: your_component_name_component_1.YourComponentName },
]

Ensuite, dans le app.routing.ts (votre fichier de routage), vous devrez ajouter une instruction import à votre fichier javascript.

// JAVASCRIPT IMPORT
import { DYNAMIC_ROUTES } from 'location javascript file';

const appRoutes: Routes = [
    { path: 'home', component: NormalLayoutComponent, children: DYNAMIC_ROUTES },
]

En utilisant cette méthode, vous pouvez maintenant manipuler le fichier javascript avec TypeScript pour les modifications dynamiques. Vous pouvez même créer le fichier par php, puis le conserver au même endroit. Notez que vous devez avoir un composant déjà compilé dans mon cas. Il en existe un et il gère tous les itinéraires dans un composant pour moi.

Assurez-vous également que si vous utilisez un compilateur qui supprime votre javascript, lisez-le dans le dossier de construction ou assurez-vous qu'il se compile avec votre application.

1
Vamidi