1

The requirement I am trying to implement using Angular2 and the new component router is as follows: A page is divided into 2 sections. eg: (left,right) Each section will contain a component. Each component has its own routing and states. Is there any way to maintain the states using url? So that I will be able to share the link and get the components initialized into their states based on the url.

I have used auxiliary router outlet to represent each section. How can I represent both the auxiliary routes using the url? Or have I misunderstood the usage of auxiliary routes?

The example can be found at https://github.com/rmchndrng/ng2learnrouter

My routing configuration

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 },
        ]
      }
    ];

The example application is running at https://rmchndrng.github.io/ng2learnrouter/#/home

The following works

https://rmchndrng.github.io/ng2learnrouter/#/home(left:heroes/list) https://rmchndrng.github.io/ng2learnrouter/#/home(right:villains/list)

Where as I am looking for something like the following which will be able to represent both the router outlet states.

eg.

https://rmchndrng.github.io/ng2learnrouter/#/home(left:heroes/list,right:villains/list) https://rmchndrng.github.io/ng2learnrouter/#/home(left:heroes/list)(right:villains/list) etc.

My project dependencies.

  "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"
  }
rmchndrng
  • 782
  • 1
  • 8
  • 18
  • https://plnkr.co/edit/L02zD2BviQ4X6RirivY7?p=preview Run this plunk in full screen and see the addressbar after loading admin comp from the list. This will give you idea how to form url – Arpit Agarwal Jun 28 '16 at 03:07
  • Still I do not see multiple router outlets being used. – rmchndrng Jun 28 '16 at 03:57
  • https://run.plnkr.co/xt5RcQaGrfLxxZdU/crisis-center/(errors//admin:admin) .... error is in defult outlet and admin is admin outlet – Arpit Agarwal Jun 28 '16 at 04:23
  • Why don't you use the normal URL part for the left and the `(...)` part for the right instead of using `(...)` for both? – Günter Zöchbauer Jun 28 '16 at 05:20
  • @GünterZöchbauer This is just an example. In the real implementation I would like to make use of more than 2 zones/sections. I thought this is what auxiliary routes were meant to solve. – rmchndrng Jun 28 '16 at 05:41
  • I saw it mentioned that it should support multiple levels of aux routes but because it is not yet fully working I didn't spend much time to investigate. – Günter Zöchbauer Jun 28 '16 at 05:47
  • Cool.. hope it gets implemented.. – rmchndrng Jun 28 '16 at 06:02

1 Answers1

1

I was able to represent multiple auxiliary router outlet routes on the url by adding them as segments.

eg. https://rmchndrng.github.io/ng2learnrouter/#/home(left:heroes/list//right:villains/list)

But I am still having trouble with the navigation within an outlet, maintaining the state of the other.

Since the new router is still in alpha, waiting for a release candidate.

rmchndrng
  • 782
  • 1
  • 8
  • 18