Динамическая маршрутизация на основе внешних данных

Я работаю над приложением, которому необходимо настроить маршруты на основе некоторого внешнего источника данных. Жизненный цикл приложения выглядит следующим образом:

ng2 с App
Приложение содержит заголовок, роутер-выход и нижний колонтитул
маршрут по умолчанию настроен на homeComponent
homeComponent имеет категорииListComponent
categoriesListComponent вызывает метод get из категорийService
categoriesService возвращает список категорий из api
categoriesComponent отображает список и вводит новые маршруты для каждой категории обратно в приложение через routeConfigurator

_{На самом деле есть еще один слой абстракции с помощью routeService, но это не нужно для этого примера}

Эта часть работает, так как мы начали на домашней странице, был создан api-вызов и создали routerConfigs для каждой категории. Поэтому, когда пользователь нажимает на категорию, маршрут уже настроен с использованием правильных метаданных категорииComponent + и отображается правильная информация.

Однако, если доступ к определенной странице категории напрямую, ng2 еще не имеет routerConfig для этого маршрута, так как вызов api ничего не возвращает, не говоря уже об обстреле. Ng2 просто предоставляет базовое приложение с заголовком, нижним колонтитулом и пустым маршрутизатором.

Единственное решение, о котором я могу думать, довольно "хакерское". Храните кешированный json файл на сервере приложений и загружайте его в исходный html, а затем вставьте его в службу в ng2 bootstrap/init. Таким образом, маршруты настраиваются перед ng2, даже для создания страницы.

Я спрашиваю о любых других возможных предложениях, возможно, о том, что у меня есть немного больше возможностей ng2, которые я могу прослушивать. Возможно, это было решено уже, и я просто не усовершенствовал свой google-fu.

Спасибо заранее.

Ответ 1

В новом маршрутизаторе (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig можно использовать для загрузки новых маршрутов

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

У вас будет настраиваемая директива routerLink или только какая-либо ссылка или кнопка, которая вызывает обработчик событий при щелчке, где загружаются новые маршруты, а затем вызывается router.navigate(...) для перехода к соответствующему маршруту.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 предоставляет RC.6 Plunker

Ответ 2

Я не знаю, был ли приведенный выше комментарий вашим сулотированием результата, который вы хотели, но у меня есть новый метод, который может быть интересен для вас и других разработчиков там.

Я создал файл javascript, где я добавляю свои маршруты.

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

Затем в app.routing.ts (ваш файл маршрутизации) вам нужно будет добавить оператор импорта в файл javascript

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

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

Таким образом, вы теперь можете манипулировать файлом javascript с помощью Typescript для динамических изменений. Вы даже можете создать файл по php, а затем сохранить его в одном месте. Обратите внимание, что вам нужен уже скомпилированный компонент, в моем случае есть один, и он обрабатывает все маршруты в одном компоненте для меня.

Также убедитесь, что если вы используете компилятор, который удаляет ваш javascript, обязательно прочитайте их в папке сборки или убедитесь, что он скомпилирован с вашим приложением.