Enrutamiento dynamic basado en datos externos

Estoy trabajando en una aplicación que necesita configurar rutas basadas en una fuente de datos externa. El ciclo de vida de la aplicación se ve así:

  • ng2 inits con la aplicación
  • La aplicación contiene encabezado, enrutador de salida y pie de página
  • la ruta predeterminada está configurada para homeComponent
  • homeComponent tiene categoríasListComponent
  • categoriesListComponent llama a un método get de categoríasService
  • categoriesService obtiene una lista de categorías de la API
  • categoriesComponent muestra la lista e inyecta nuevas rutas para cada categoría en la aplicación a través de un routeConfigurator

En realidad, hay otra capa de abstracción con un servicio de rutas, pero eso no es necesario para este ejemplo

Esa parte funciona, desde que comenzamos en la página de inicio, se realizó la llamada de API y se crearon los enrutadores para cada categoría. Entonces, cuando el usuario hace clic en una categoría, la ruta ya está configurada con los metadatos categoryComponent + correctos y se le muestra la información correcta.

Sin embargo, si se accede a una página de categoría específica, ng2 aún no tiene el routerConfig para esa ruta, ya que la llamada de API no ha devuelto nada, y mucho menos aún se ha desactivado. Ng2 solo representa la aplicación básica con encabezado, pie de página y un enrutador vacío.

La única solución que puedo pensar es bastante “hacky”. Mantenga un archivo json en caché en el servidor de aplicaciones y cárguelo en el html inicial, luego inyéctelo en un servicio en ng2 bootstrap / init. De esta forma, las rutas se configuran antes que ng2 incluso los seres para representar la página.

Estoy pidiendo cualquier otra sugerencia posible, tal vez alguien con un poco más de experiencia ng2 en la que pueda hablar. Tal vez esto ya se haya resuelto y simplemente no he perfeccionado mi google-fu lo suficiente.

Gracias por adelantado.

En el nuevo enrutador ( >= RC.3 ) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig se puede usar para cargar nuevas rutas

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

Tendría una directiva routerLink personalizada o solo un enlace o botón que llama a un controlador de eventos al hacer clic donde se cargan nuevas rutas y luego se llama a router.navigate(...) para navegar a la ruta adecuada.

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

No sé si uno de los comentarios anteriores es su opinión del resultado que quería, pero tengo un nuevo método que podría interesarle a usted y a otros desarrolladores.

Creé un archivo javascript donde agregué mis rutas.

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

Luego, en la app.routing.ts (su archivo de enrutamiento) tendrá que agregar una statement de importación a su archivo javascript

 // JAVASCRIPT IMPORT import { DYNAMIC_ROUTES } from 'location javascript file'; const appRoutes: Routes = [ { path: 'home', component: NormalLayoutComponent, children: DYNAMIC_ROUTES }, ] 

De este modo, al hacer este método, ahora puede manipular el archivo javascript con Typescript para cambios dynamics. Incluso puede crear el archivo por php y luego mantenerlo en el mismo lugar. Observe que necesita tener un componente ya comstackdo en mi caso, hay uno y maneja todas las rutas en un componente para mí.

También asegúrese de que si está utilizando un comstackdor que elimina su javascript, asegúrese de leerlos en la carpeta de comstackción o asegúrese de que comstack con su aplicación.