Dynamiczne wyznaczanie trasy na podstawie danych zewnętrznych

Question

Pracuję nad aplikacją, która musi skonfigurować trasy na podstawie zewnętrznego źródła danych. Cykl życia aplikacji wygląda następująco:

• NG2 inits z App
• App zawiera nagłówek, Router-wylot, i stopka
• trasa domyślna jest skonfigurowana do homeComponent
• homeComponent ma categoriesListComponent
• categoriesListComponent wywołuje metodę get z kategoriiService
• categoriesService zwraca listę kategorii z api
• categoriesComponent renderuje listę i wstrzykuje nowe trasy dla każdej kategorii z powrotem do aplikacji za pośrednictwem routesConfigurator

_{Jest rzeczywiście inna warstwa abstrakcji z routesService jednak, że nie jest potrzebny do tego przykładu}

że część działa, ponieważ zaczęliśmy na stronie głównej, api wywoływano i tworzono routerConfigs dla każdej kategorii. Kiedy użytkownik kliknie na kategorię, trasa jest już skonfigurowana z poprawnymi metadanymi kategoriiComponent + i są wyświetlane prawidłowe informacje.

Jednakże, jeśli strona z konkretną kategorią jest dostępna bezpośrednio ng2 nie ma jeszcze routerConfig dla tej trasy, ponieważ połączenie api nie zwróciło nic, nie mówiąc już o zwolnieniu. Ng2 po prostu renderuje podstawową aplikację z nagłówkiem, stopką i pustym gniazdem routera.

Jedyne rozwiązanie, jakie mogę wymyślić, to dość "hacky". Zachowaj zbuforowany plik json na serwerze aplikacji i załaduj go do początkowego html, a następnie wprowadź go do usługi na ng2 bootstrap/init. W ten sposób trasy są konfigurowane przed ng2 nawet bytami renderującymi stronę.

Proszę o wszelkie inne możliwe sugestie, może ktoś z nieco większym doświadczeniem ng2, że mogę dzwonić. Może to już rozwiązano i po prostu nie udoskonaliłem mojego google-fu wystarczająco.

Z góry dziękuję.

Answer 1

W nowym routerem (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchorresetConfig może być używany do załadowania nowych tras

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

Trzeba dyrektywę zwyczaj routerLink czy tylko niektóre łącza lub przycisku, który wywołuje zdarzenie przewodnik po kliknięciu, gdzie są ładowane nowe trasy, a następnie wywoływana jest router.navigate(...), aby nawigować do odpowiedniej trasy.

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

Answer 2

ja nie wiem, czy jeden powyższe komentarze to sulotion z takim skutkiem, że chciałeś, ale mam nową metodę, która może być zainteresowana dla siebie i innych programistów tam.

Utworzono plik javascript, w którym dodaję moje trasy.

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

Następnie w (pliku routingu) app.routing.ts trzeba będzie dodać instrukcję import do pliku javascript

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

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

Niniejszym wykonując tę ​​metodę Teraz można manipulować plik JavaScript z maszynopis do dynamicznego zmiany. Możesz nawet utworzyć plik przez php, a następnie zachować go w tym samym miejscu. Zauważ, że musisz mieć już skompilowany komponent w moim przypadku, który jest jeden i obsługuje dla mnie wszystkie trasy w jednym komponencie.

Upewnij się również, że jeśli używasz kompilatora, który usuwa Twój javascript, przeczytaj je w folderze kompilacji lub upewnij się, że kompiluje się z twoją aplikacją.