Add Parameter to Angular 2 Route from Component without Navigating

Question

With my current code I am attempting to do deep linking within my Accordion component.

By navigating to dev.local/#/accordion and then clicking on an accordion title, I want to update the route to look like:

dev.local/#/accordion/2

But I do not want to navigate to this path once it is set. Essentially, if someone were to hypothetically copy this URL it would return them to the exact accordion that was opened when they copied it.

The problem I'm running into is that I'm applying the following code to my accordion links to set the parameter:

<a [routerLink]="['Accordion',{tab:'4'}]"></a>

This works but it actually navigates and re-initializes the component. I need to be able to click this link, set the route to dev.local/#/accordion/4 without re-initializing the component by navigating to it.

Here are my current routes:

@RouteConfig([
    {
        path: '/accordion',
        component: Accordion,
        as: 'AccordionNew'
    },
    {
        path: '/accordion/:tab',
        component: Accordion,
        as: 'Accordion'
    }
]);

Answer 1

If the Aux Routes don't help, you can try my solution I used for a smiliar problem:

1. Build a RootAccordionComponent. Set a selector for your AccordionComponent and use it as a tag in the RootAccordionComponent template (eg ). Also place a somewhere in this template. For RootAccordionComponent you use "path: '/accordion/...'" RouteConfig.

2. (If not already done) build a AccordionService with a tabId attribute.
3. Build a TabIdAccordianComponent with an empty template. Use "path: '/accordion/:tab'" for it as RouteConfig. Now the only thing the component does, is to fetch the tabId from RouteParams and save it to the AccordionService.
4. When initializing your AccordianComponent, get the tabId from the AccordionService.

That way you can get the tabId when your AccordianComponent is initilized if someone goes directly to the url with an tabId, but it won't reload if the user clicks on an Accordian.

See this Plunker for a working example: http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=preview

If you launch the preview in a separate window you can also see the routes. Eg if you load " http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2 " the selected Accordion will be set to 2.

Hope this helps, although it is not the cleanest solution.

RouteConfig to get to AccordionRoot:

@RouteConfig([
  {path:'/accordion/...', name: 'AccordionRoot', component: AccordionRootComponent},
])
export class AppComponent { }

The actual AccordionRootComponent:

@Component({
    template: `
      <router-outlet></router-outlet>
      <accordion-component></accordion-component>`,
    directives: [ROUTER_DIRECTIVES, AccordionComponent]
})

@RouteConfig([
    { path: '/:tabId', name: 'AccordionTab', component: TabIdAccordionComponent, useAsDefault: true}
])
export class AccordionRootComponent { }

The TabIdAccordionComponent:

@Component({
    template: ''
})

export class TabIdAccordionComponent {

  constructor(private routeParams: RouteParams, private accordionService: AccordionService){
    let tabId = +this.routeParams.get("tabId");
    this.accordionService.tabId = tabId;
  }
}

The AccordionComponent making use of the tabId from the service: export class AccordionComponent implements OnInit { constructor(private accordionService: AccordionService){} selectedAccordionId: number;

  ngOnInit(){
    this.setSelectedAccordion(this.accordionService.tabId);
  }

  setSelectedAccordion(tabId: number){this.selectedAccordionId = tabId;}

}