Angular2-router: How to only change a parameter of a route?

Question

I want to have the following routes in my application:

export const routes: Routes = [
    { 
       path: ':universityId', 
       component: UniversityComponent,
       children: [
           { path: 'info', component: UniversityInfoComponent },
           { path: 'courses/:status', component: CoursesByStatusComponent }
       ]
    }
]

Being on /1/info or /1/courses/open url, how do I change :universityId only from UniversityComponent?

Simple router.navigate(['../', 2], {relativeTo: currentRoute }) won't do because it redirects to /2, losing all other information. Using '../2/courses/open is also not an option - I can be on any child route at that moment. Best I could come up with is:

const urlTree = this.router.parseUrl(this.router.url);
urlTree.root.children['primary'].segments[0].path = '2';
this.router.navigateByUrl(urlTree);

but it's kind of ugly

@GünterZöchbauer cool, good for you. Your answers are **VERY** useful. And you kind of answered every question I searched for :P — sabithpocker, Jul 14 '17 at 14:05
@Krishnan no :) In case if we need to do so (turns out this is kind of rare), we manipulate segments directly as in example above — Alex Shevnin, Jul 19 '17 at 13:37
Could this perhaps be done with a couple of tuples and router data providers. Then switchmap to combine results into tuple. I gave hint as to how to do router data provider here https://stackoverflow.com/questions/44892392/router-data-resolver-loading-indicator-from-angular-4-can-it-be-replicated-in & here's tuple syntax https://stackoverflow.com/questions/45177003/angular-router-data-resolver-resolve-returning-tuple-explain-parentheses-expres — JGFMK, Jul 19 '17 at 19:10

score 1 · Answer 1 · answered Aug 20 '18 at 12:30

1

This is very simple. You can simply try to use this.router.navigate(["../2", "courses", "open"], {relativeTo: this.route});

(or)

this.router.navigate(["../2", "courses/open"], {relativeTo: this.route});

This will redirect you to ../2/courses/open.

answered Aug 20 '18 at 12:30

Srilatha Patil

11
3

JGFMK · Answer 2 · 2017-07-19T19:56:52.917

Here is some code to go along with my comment above about using Tuples: So replicate this pattern twice... This shows how to integrate these classes into your project. So:

change data-component-resolver.ts to parent-child-resolver.ts for code in the link.
replace data-component.ts in the link with parent-child.component.ts below

parent-child-resolver.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {Parent} from '../shared/model/parent';
import {Children} from '../shared/model/children';
import {ParentService} from '../providers/parent.service';

@Injectable()
export class parentChildResolver implements Resolve<[Parent,(Children[])>

  constructor(private parentService : ParentService) {}

  resolve(  route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
         ) : Observable<[Parent,(Children[])> 
  {
      return this.parentService.findParentById(route.params['id'])
        .switchMap(parent => 
            this.parentService.findChildrenForParent(parent.id),
              (parent, children) => [parent, children]
         );
  }
}

parent-child.component.ts

import {Component, OnInit} from '@angular/core';
import {Parent} from '../shared/model/parent';
import {Children} from '../shared/model/children';
import {Observable} from 'rxjs';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'parent-child',
    templateUrl: './parent-child.component.html'
})

export class ParentChildComponent implements OnInit{
  $parent: Observable<Parent>;
  $children: Observable<Children[]>;

  constructor(private route:ActivatedRoute) {}

  ngOnInit() {
    this.parent$ = this.route.data.map(data => data['key'][0]); //from router.config.ts
    this.children$ = this.route.data.map(data => data['key'][1]);
  }
}

Angular2-router: How to only change a parameter of a route?

2 Answers2

parent-child-resolver.ts

parent-child.component.ts

Linked