1)Check [image one] if the user clicks on that tile we are showing full view page [image 2] to him

2)After clicking the left-side blue color back icon we need to redirect him to the back page where he stayed last time means (same tab and same position).

3)I have passed query params in the URL and stored the query params in local storage.

4)After clicking on the back button I am getting params from local storage and passing in the navigate URL but after clicking back it is not working properly every time it is going to the 1st tab only one, two, three

->Here in the first image after clicking on the tile second image will be shown 
->In the second image after clicking left side back icon I need to get 1st image URL and page also should be same but it is going to other URL and other page.

please check the code and help me

enter code here  
getUrl() {
   this.router.navigate(['/app/my-transactions'], { queryParams: { 'tab': this.currentTab, 'type': this.type } });
    localStorage.setItem('tab' , this.currentTab);
    localStorage.setItem('type' ,this.type);
  }

showData(type) {
    this.type = type
    if (type === 'shift') {
      this.isStock = true;
      this.isShift = true;
      this.addParams;
      this.dataSource=[];
      if (this.transactionData && this.transactionData.stockShift) {
        this.dataSource = (this.transactionData.stockShift).reverse() || [];
      }
    } else if (type === 'transaction') {
      this.isStock = false;
      this.addParams;
      this.dataSource=[];
      if (this.transactionData && this.transactionData.transactions) {
        this.dataSource = (this.transactionData.transactions).reverse() || [];
      }
    }

    else if (type === 'returns') {
      this.isReturns = true;
      // this.isStock = false;
      this.addParams;
      this.dataSource=[];
      if (this.transactionData && this.transactionData.returns) {
        this.dataSource = (this.transactionData.returns).reverse() || [];
      }
    }
    else if (type === 'processing') {
      this.isStock = true;
      this.isShift = false;
      this.addParams;
      this.dataSource=[];
      if (this.stockTransactions && this.stockTransactions.stockProcessing) {
        this.dataSource = (this.stockTransactions.stockProcessing).reverse() || [];
      }
    } else if (type === 'adjustment') {
      this.isStock = true;
      this.isShift = false;
      this.addParams;
      this.dataSource=[];
      if (this.stockTransactions && this.stockTransactions.stockAdjustment) {
        this.dataSource = (this.stockTransactions.stockAdjustment).reverse() || [];
      }
    }
    this.getUrl();
  }

  backbtn() {
    let currentTab = localStorage.getItem('tab');
    let type = localStorage.getItem('type');
    this.router.navigate(['app/my-transactions'], {queryParams: {'tab': currentTab, 'type': type }, queryParamsHandling: 'merge'});
  }

CodePudding user response：

There's something like preserveQueryParams in angular. I think you can go for that.

CodePudding user response：

There may be problem of type. Because value you will get from localstoeage will be in string format may be. And material need it in number type. So you may convert it into number and try it.