how can i find paramter of previous route in angular

Question

i want find the params in previous route in angular typescript .

i use this code :

private previousUrl: string = undefined;
private currentUrl: string = undefined;

constructor(private router: Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            this.previousUrl = event.url;
            this.currentUrl =  this.currentUrl;
        }
    });
}

but i can not access to the params of this url :

http://localhost:4200/claims-manager/200/edit

i want ti access 200 . how can i find params in url ????

Do you want the immediate previous route? – Nafeo Alam Jun 22 '20 at 13:51 — Nafeo Alam, Jun 22 '20 at 13:51

score 1 · Answer 1 · answered Jun 22 '20 at 11:05

You can do it in your component file but It is a best practice to do it in a service (using rxjs) to pass data and call it in your component file

In your service

export class myService  {   
  constructor() { } 
  private param = new BehaviorSubject("");
  sharedParam = this.param.asObservable();


  paramToPass(param:string) { 
    this.param.next(param)}    
}

In your component class that set param

export class ComponentSetParam  {
 param: string   
    constructor(private myService: Service)
  
 this.myService.setParam(this.param);

}

in your appModule

@NgModule({
  declarations: [YourComponents]
  imports: [ AppRoutingModule, YourModules...],
  providers: [ShareService],
})
export class AppModule {}

Component that you want to pass data

export class ComponentGetParam  {
    paramFromService: string
    
     constructor(private myService: Service) {
       this.shareService.sharedData.subscribe(data : string => { 
         this.paramFromService = data;
     })
   }
  

}

Roman Leliuk · Answer 2 · 2020-06-22T10:30:30.577

0

Try this:

readonly _destroy$: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);

constructor(
    private activatedRoute: ActivatedRoute,
) {
  this.activatedRoute.parent.paramMap
      .pipe(
        distinctUntilChanged(),
        takeUntil(this._destroy$)
        )
      .subscribe((params: ParamMap) => {
        const id = params.get('id');
    });
}

ngOnDestroy() {
  this._destroy$.next(true);
  this._destroy$.complete();
}

Where 'id' is a name, that you use in the routing, e.g.

path: '/claims-manager/:id/'

edited Jun 22 '20 at 10:30

answered Jun 22 '20 at 10:06

Roman Leliuk

71
7

i want find id for previous route not current route – kianoush dortaj Jun 22 '20 at 10:21
Look at the example, i use '.parent' for accessing for parent routing and params '200'. – Roman Leliuk Jun 22 '20 at 10:25
If you want to get full previous route, look on this: [link](https://stackoverflow.com/questions/41038970/how-to-determine-previous-page-url-in-angular) – Roman Leliuk Jun 22 '20 at 10:26
1

wthat is this `this._destroy$` – kianoush dortaj Jun 22 '20 at 10:27
This is unsubscriber. [link](https://www.learnrxjs.io/learn-rxjs/operators/filtering/takeuntil) – Roman Leliuk Jun 22 '20 at 10:27
i have tow page . 1 - list of items . 2- edit item - - - i want access to id in page 1 ( list of item ) . now i must use you code in page 1 or page 2 ? – kianoush dortaj Jun 22 '20 at 10:33
Use this code - where you need this var('200'), in your case - it's on list of items. – Roman Leliuk Jun 22 '20 at 10:35
i want when in list of items , click on one items , when got in the edit page and back into the list of items i can get the params (id) in list of items – kianoush dortaj Jun 22 '20 at 10:37
Try to debug the 'params' var and look what's inside. – Roman Leliuk Jun 22 '20 at 10:59

mr. pc_coder · Answer 3 · 2020-06-22T13:48:04.470

Demo You can do it in service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ShareService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();
  setParam(param:string) { this.paramSource.next(param)}    
}

in constructors

constructor(private shareService: ShareService)

in component in ngOnDestroy set this like this.shareService.setParam(param);

in appmodule

  providers:[ShareService ]

in new component in ngOnInit or in constructor get like

 this.shareService.sharedData.subscribe(data=> { console.log(data); })

how can i find paramter of previous route in angular

3 Answers3