2016-06-03 6 views
4

У нас есть приложение SPA, написанное в Angular, которое использует динамические маршруты загрузки (в отличие от статически определенных маршрутов).Angular2 RC и динамические маршруты

Со временем количество этих динамически загружаемых компонентов пользовательского интерфейса будет расти и расти. Для любого конкретного развертывания клиента мы будем использовать только небольшое подмножество возможных компонентов. Во время выполнения список компонентов будет управляться данными. Таким образом, мое желание взять этот список компонентов и сделать следующее: - определить маршрут приложения для каждого компонента во время выполнения - ленивая нагрузка, составляющая

Это проблема, которая была решена в угловой 1 версию наш приложение (с использованием ocLazyLoad пакета и углового в $ stateProvider)

Это, как представляется, решаемая в некоторых более поздних версиях бета-Angular2 (с использованием AsyncRoutes и метод router.config - см технику here)

Но в RC1, что AsyncRoutes и метод router.config, кажется, сломаны.

Я могу найти очень мало в отношении инструкций по загрузке компонентов/маршрутов асинхронно в кандидатах на выпуск Angular2.

Есть ли канонический пример для этого с последними кандидатами?

+0

Угловая2 действительно использует ленивые маршруты. В angular-cli они являются значениями по умолчанию при создании маршрута с помощью функции scaffolding. Он генерирует компонент в папке с префиксом +. Есть отличный разговор от Мишко на ngconf 2016 https://youtu.be/d8yAdeshpcw – hmrc87

+0

Да, мы видели это видео. Мы не можем заставить его работать как рекламируемый –

ответ

1

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

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

Ленивые компоненты загрузки в настоящее время (RC.5) реализованы с использованием модулей ленивым.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 обеспечивает rc.6 Plunker

+0

Я видел, как router.resetConfig дается как ответ на несколько вариантов этого вопроса, но никогда не видел рабочего примера. Когда я пытался его использовать, у меня было странное поведение, когда компоненты создавались несколько раз. Вы случайно имеете ссылку на плункер, где это используется? – nickspoon

+0

Извините, нет. Я сам не пробовал. Мне еще предстоит погрузиться в маршрутизацию с помощью модулей. –

+1

Günter правильно, полная ленивая загрузка находится в RC5. Имейте в виду, что некоторые компоненты, связанные с угловым бутстрапом, немного отстают и только смеются с этой функциональностью в своих ночных сборках –

0

С RC5 NG2 команда наконец-то нашел способ динамической загрузки маршрутизатора 1. AppModule вводится и каждый имеет modulised (обратно AngularJS 1 дату!) 2. "loadChildren" пусть вы можете загрузить из файлов с диска:

{path: screenId, loadChildren: 'app/screens/' + screenId + '.module' }) 

Вот мой пример кода: http://plnkr.co/edit/nm5m7N?p=preview

+0

вы что-то забыли? plnkr нарушен? –

+0

Это работает для меня, попробуйте еще раз с хромом –

+0

Это пример ленивой загрузки, а не динамической загрузки.Вы просто lazyloading модуля в соответствии с вашим screenId, который в вашем plunker вы жестко запрограммировали ранее в функции. Вопрос в том, как вы можете это сделать, когда вы сначала должны асинхронно извлекать маршруты из файла или базы данных? – nickspoon

Смежные вопросы