1

I use the following approach to pass parameters through different routes and I am trying to keep these parameter values on page refresh or opening another tab on the routed page. However, after retrieving these parameters, they lost their values. So, is it possible to keep their values without using :id etc suffix on the routes? In this scenario, I open the SecondComponent first and then open its Child called SecondChildComponent using tabs.

first.component.ts

details(name) {
    this.router.navigate(['/second'], { state: { name: name} });
}

second.component.ts

constructor(private router: Router) {
   this.name= this.router.getCurrentNavigation().extras.state.name;
}

routing.module

const routes: Routes = [
  {
    path: 'second',
    component: SecondComponent,
    children: [
      {
        path: '',
        redirectTo: 'second-child',
      },
      {
        path: 'second-child',
        component: SecondChildComponent
      }
    ]
  }
];
Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35
Jack
  • 1
  • 21
  • 118
  • 236
  • 1
    did you try to use localStorage? this is a keyvalue storage on the browser. you can access it with localStorage.setItem('key', 'value'). You can't store an literal object directly but you can do localStorage.setItem('key', JSON.stringify(object)) then to retrieve it JSON.parse(localStorage.getItem('key')) – Ivan Lynch Jan 05 '21 at 14:01
  • @IvanLynch Hola Amigo. Actually I thought to use it, but I was not sure if it is commonly used for this scenario and could not find an example for this scenario. Would you suggest it for my situation? And could you pls post an example code as answer? Gracias. – Jack Jan 06 '21 at 21:24

1 Answers1

1

I'm afraid that your code don't work as you expect, please read this link about pass data using state

The brief idea is that you can get the value of the state

In the component where you go

ngOnInit() {
    this.activatedRoute.paramMap
      .pipe(map(() => window.history.state)).subscribe(res=>{
        console.log(res)
    })
  }

In the "main component" using

ngOnInit() {
    this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      map(() => this.router.getCurrentNavigation().extras.state)
    ).subscribe(res=>{
       console.log(res)
    })
  }

Well about your question, the only "object" that maintain when you change the route is a "service". The only "object" that maintain when you "refresh" is localStore -or use some king of back-up in the server.

Using a service, simply has

@Injectable({
  providedIn: 'root',
})
export class DataService {

  data:any;
  constructor() { }

}

And use

    .subscribe(res=>{
        this.dataService.data=res.name || this.dataService.data
        this.name=this.dataService.data
    })

Another aproach is if you don't receive a parameter router to first component. This idea can use e.g. if you has a typical component with a table with a button edit that links to a "detail" component. If the "detail" don't receive the value route to the component with the table

    .subscribe(res=>{
        if (!res.name)
           this.router.navigateTo(['/table'])
    })
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Thanks a lot for these good explanations. But I am looking for a solution without service. And I am wondering if using localStorage is a good idea for this scenario. Any idea about that? – Jack Jan 06 '21 at 21:32