Routing dinamico in base a dati esterni

Question

Sto lavorando a un'applicazione che deve configurare percorsi basati su alcune origini dati esterne. Il ciclo di vita dell'applicazione è simile al seguente:

• NG2 INIT con App
• App contiene intestazione, router-outlet, e piè di pagina
• percorso di default è configurato per homeComponent
• homeComponent ha categoriesListComponent
• categoriesListComponent chiama un metodo get da categoriesService
• categoriesService recupera un elenco di categorie dall'api
• categoriesComponent rende l'elenco e inietta nuove rotte per ogni categoria di nuovo in App tramite un routesConfigurator

_{In realtà c'è un altro strato di astrazione con un routesService, ma che non è necessario per questo esempio}

Quella parte funziona, da quando abbiamo iniziato alla home page, è stata effettuata la chiamata api e abbiamo creato i routerConfigs per ogni categoria. Pertanto, quando l'utente fa clic su una categoria, il percorso è già configurato con la categoria correttaComponente + metadati e vengono visualizzate le informazioni corrette.

Tuttavia, se si accede a una pagina di categoria specifica direttamente ng2 non ha ancora il routerConfig per quella rotta, poiché la chiamata api non ha restituito nulla, per non parlare del fatto che è stata ancora attivata. Ng2 riproduce semplicemente l'app di base con intestazione, piè di pagina e una router-outlet vuota.

L'unica soluzione che riesco a pensare è piuttosto "hacky". Conservare un file json memorizzato nella cache sul server dell'app e caricarlo nell'html iniziale, quindi inserirlo in un servizio in ng2 bootstrap/init. In questo modo i percorsi sono configurati prima che ng2 sia anche gli esseri per rendere la pagina.

Sto chiedendo altri possibili suggerimenti, forse qualcuno con un po 'più di esperienza ng2 su cui posso intervenire. Forse questo è già stato risolto e non ho ancora perfezionato il mio google-fu.

Grazie in anticipo.

Answer 1

Nel nuovo router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchorresetConfig può essere utilizzato per caricare nuove rotte

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

Si avrebbe una direttiva personalizzato routerLink o solo un po 'di link o pulsante che richiama un evento gestore al clic su dove vengono caricati nuovi percorsi e quindi viene chiamato router.navigate(...) per navigare sulla rotta appropriata.

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

Answer 2

Non so se uno le osservazioni di cui sopra è il tuo sulotion del risultato che si voleva, ma ho un nuovo metodo che potrebbe essere interessato per voi e gli altri sviluppatori là fuori.

Ho creato un file javascript dove aggiungo i miei percorsi.

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

Poi nel (il file di routing) app.routing.ts si dovrà aggiungere istruzione import al file javascript

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

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

Con la presente facendo questo metodo ora in grado di manipolare il file JavaScript con tipografico per dinamica i cambiamenti. Puoi anche creare il file con php e poi tenerlo nello stesso posto. Si noti che è necessario avere un componente già compilato nel mio caso ce ne sia uno e gestisce tutti i percorsi in un componente per me.

Assicurati inoltre che se stai utilizzando un compilatore che rimuove il tuo javascript assicurati di leggerli nella cartella di compilazione o assicurati che venga compilato con la tua applicazione.