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:
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.
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
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.