Динамическая маршрутизация на основе внешних данных
Я работаю над приложением, которое должно настраивать маршруты на основе некоторого внешнего источника данных. Жизненный цикл приложения выглядит так:
- ng2 inits с приложением
- Приложение содержит заголовок, роутер-выход и нижний колонтитул
- маршрут по умолчанию настроен на homeComponent
- homeComponent имеет категорииListComponent
- categoryListComponent вызывает метод get из категорийService
- categoryService возвращает список категорий из api
- categoryComponent отображает список и вводит новые маршруты для каждой категории обратно в приложение через routeConfigurator
На самом деле есть еще один слой абстракции с помощью routeService, но это не нужно для этого примера.
Эта часть работает, так как мы начали на домашней странице, был сделан вызов api и создан routerConfigs для каждой категории. Поэтому, когда пользователь нажимает на категорию, маршрут уже настроен с правильными метаданными категорииComponent + и отображается правильная информация.
- Возможна ли уклон 2 объекта через параметры маршрута?
- Предупреждать пользователя о несохраненных изменениях перед выходом на страницу
- Использование разрешения в Angular2 Routes
- Передача данных в дочерние компоненты маршрутизатора-выхода (угловые 2)
- Как получить текущий маршрут
Однако, если доступ к определенной странице категории напрямую, ng2 еще не имеет routerConfig для этого маршрута, так как вызов api ничего не вернул, не говоря уже о запуске. Ng2 просто предоставляет базовое приложение с заголовком, нижним колонтитулом и пустым маршрутизатором.
Единственное решение, о котором я могу думать, довольно «хакерское». Храните кешированный json-файл на сервере приложений и загружайте его в исходный html, а затем вставьте его в службу в ng2 bootstrap / init. Таким образом, маршруты настраиваются перед ng2 даже существами для отображения страницы.
Я прошу о любых других возможных предложениях, возможно, о том, что у меня есть немного больше возможностей ng2, которые я могу прослушивать. Возможно, это уже было решено, и я просто не усовершенствовал свой google-fu.
Заранее спасибо.
- Угловое redirect на страницу входа в систему
- Угловой 2.0 маршрутизатор не работает при перезагрузке браузера
- Как переключать макеты в Angular2
- Как использовать HashLocationStrategy с виджем Auth0 Lock для входа пользователя
- Как вернуться на предыдущую страницу
- Как определить, как пользователь перемещается обратно в Angular2?
- Маршрут Angular 2's Router нарушен при использовании маршрутов HTML5?
- Угловая ошибка 2: 404 возникает при обновлении через браузер
В новом маршрутизаторе ( >= 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
Я не знаю, является ли один из приведенных выше комментариев вашей сутоцией результата, который вы хотели, но у меня есть новый метод, который может быть интересен для вас и других разработчиков.
Я создал файл 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 с помощью TypScript для динамических изменений. Вы даже можете создать файл по php, а затем сохранить его в одном месте. Обратите внимание, что вам нужно иметь уже скомпилированный компонент, в моем случае есть один, и он обрабатывает все маршруты в одном компоненте для меня.
Также убедитесь, что если вы используете компилятор, который удаляет ваш javascript, обязательно прочитайте их в папке сборки или убедитесь, что он компилируется вместе с вашим приложением.