Как поддерживать состояния через розетки маршрутизатора, используя URL-адрес в маршрутизаторе Angular2 Component?

Требование, которое я пытаюсь реализовать с помощью Angular2 и нового компонентного маршрутизатора, выглядит следующим образом: страница разделена на 2 раздела. например: (слева, справа) Каждый раздел будет содержать компонент. Каждый компонент имеет свою маршрутизацию и состояния. Есть ли способ сохранить состояния с помощью URL-адреса? Так что я смогу поделиться ссылкой и инициализировать компоненты в их состояниях на основе URL-адреса.

Я использовал дополнительный выход маршрутизатора для представления каждой секции. Как я могу представить оба вспомогательных маршрута с помощью URL-адреса? Или я неправильно понял использование вспомогательных маршрутов?

Пример можно найти по адресу https://github.com/rmchndrng/ng2learnrouter.

Моя конфигурация маршрутизации

export const routes: RouterConfig = [
      {
        path: '',redirectTo: '/home', terminal: true
      },
      { path: 'home', component: HomeComponent },
      {
        path: 'heroes', component: HeroesComponent, outlet: 'left',
        children: [      
          { path: 'list', component: HeroesListComponent },
          { path: 'view/:id', component: HeroViewComponent },
        ]
      },
      {
        path: 'villains', component: VillainsComponent, outlet: 'right',
        children: [
          { path: 'list', component: VillainsListComponent },
          { path: 'view/:id', component: VillainViewComponent },
        ]
      }
    ];

Пример приложения работает по адресу http://ramachandrang.com/ng2learnrouter/#/home.

Следующие работы

http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list) http://ramachandrang.com/ng2learnrouter/#/home(right:villains/list)

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

eg.

http://ramachandrang.com/ng2learnrouter/#/home(слева:герои/список,справа:злодеи/список) http://ramachandrang.com/ng2learnrouter/#/home(слева:герои/список)(справа:злодеи/список) и т. д.

Мои зависимости проекта.

  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  }

person rmchndrng    schedule 28.06.2016    source источник
comment
plnkr.co/edit/L02zD2BviQ4X6RirivY7?p=preview Запустите этот планк в полноэкранном режиме и увидеть адресную строку после загрузки админ компа из списка. Это даст вам представление о том, как сформировать URL   -  person Arpit Agarwal    schedule 28.06.2016
comment
Тем не менее я не вижу использования нескольких розеток маршрутизатора.   -  person rmchndrng    schedule 28.06.2016
comment
run.plnkr.co/xt5RcQaGrfLxxZdU/crisis-center/( ошибки// .... ошибка в стандартном выходе, а admin - это выход администратора   -  person Arpit Agarwal    schedule 28.06.2016
comment
Почему бы вам не использовать обычную часть URL слева и часть (...) справа вместо использования (...) для обоих?   -  person Günter Zöchbauer    schedule 28.06.2016
comment
@GünterZöchbauer Это всего лишь пример. В реальной реализации я хотел бы использовать более 2 зон/разделов. Я думал, что это то, что вспомогательные маршруты должны были решить.   -  person rmchndrng    schedule 28.06.2016
comment
Я видел упоминание о том, что он должен поддерживать несколько уровней вспомогательных маршрутов, но, поскольку он еще не полностью работает, я не тратил много времени на изучение.   -  person Günter Zöchbauer    schedule 28.06.2016
comment
Круто..надеюсь, это будет реализовано..   -  person rmchndrng    schedule 28.06.2016


Ответы (1)


Я смог представить несколько выходных маршрутов вспомогательного маршрутизатора в URL-адресе, добавив их в виде сегментов.

например. http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list//right:villains/list)

Но у меня все еще возникают проблемы с навигацией внутри одной розетки, поддержанием состояния другой.

Так как новый маршрутизатор все еще находится в альфа-версии, ждем релиз-кандидата.

person rmchndrng    schedule 29.06.2016