Nativescript queryParamsMap not working while navigating back

Question

Actually I am in a scenario where there are two screens. One is listComponent and other is DetailComponent.

on ListComponent.ts

this.activatedRoute.queryParamMap.subscribe((params) => {
        console.log('param:' + params.get('updatedIndex'));
    })

when i tap on any item from list I navigates to ListDetails screen and over there I did some changes in item. And I want that changes to reflect on ListComponent whenever I will navigate back. So what I did in detailComponent is

this.routerExtension.navigate([], {
        relativeTo: this.activatedRoute, queryParams: {
            updatedIndex: this.listIndex
        }, queryParamsHandling: 'merge'
    })

In my understanding this will update queryparams in my route. And whenever I will go back to listcomponent screen my queryParamMap observable will get trigger. But my queryParamMap only trigger once when I navigate on ListComponent for the first time.

below is my routing.

const routes: Routes = [
{ path: "list-details", component: ListDetailsComponent },
{ path: "", component: MyListComponent },
];

Answer 1

Create an Observable and listen to it from Screen 1 and then push any updates through the observable from screen 2 and close it.

notify.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs-compat/Subject';

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

private refreshDataForView = new Subject<any>();
refreshDataForParentViewObservable$ = this.refreshDataForView.asObservable();

public relaodDataForParentView(data: any) {
    if (data) {
    this.refreshDataForView.next(data);
    }
}
}

---

Second componenet.ts

     constructor(
    private notifyService: NotifyService
  ) {  }

  goBack() {
    this.notifyService.relaodDataForParentView({ data: 'any data you wanrt to pass here ' });
    this.router.back();
  }

---

First component.ts

 reloadDataSubscription: any;

constructor(
    private notifyService: NotifyService
    ) {}
    ngOnInit() {
 this.reloadDataSubscription = this.notifyService.refreshDataForParentViewObservable$
 .subscribe((res) => {
    console.log('======', res);
    // do what you want to do with the data passed from second view
    });
}