CODEWITHSUNDEEP
angularionic-frameworkroutesionic4
aRyhan
aRyhan

Reputation: 355

Ionic 4 Router Link and queryParams not working

I have been trying different solution i found here. However, none of it works. I am able to produce the link with parameters but still not able to get it in another component. here is my code:

app-routing.module:

  { path: 'branch', loadChildren: './branch/branch.module#BranchPageModule' }

choosePage.html:

 <ion-col>
    <a class="flex" [routerLink]= "['/branch']" [queryParams]="{ id: '17'}" routerDirection="forward">
         <!-- something here -->
    </a>
  </ion-col>

branch.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';


@Component({
  selector: 'app-branchprofile',
  templateUrl: './branchprofile.page.html',
  styleUrls: ['./branchprofile.page.scss'],
})

export class BranchprofilePage implements OnInit {

  brand: string;

  constructor(private route: ActivatedRoute) {  }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.id)
      .subscribe(params => {
        console.log(params); 

        this.brand = params.id;
        console.log(this.brand); 
      });
    }
}

branch.page.html:

{{ brand }}

What could be missing?? Even in console.log have nothing

Upvotes: 0

Views: 4944

Answers (2)

Everton Costa
Everton Costa

Reputation: 650

Updating... you can use paramMap as well:

constructor(private actRoute: ActivatedRoute){

     this.actRoute.paramMap.subscribe(params => { 
      if (params) {
        console.log('param => ', params['params']);
      }else{
        console.log('No Params...');
      }
    });

}

Upvotes: 1

chrismclarke
chrismclarke

Reputation: 2105

You cannot apply filter until after you have received data, and from the looks of it you don't need to apply at all as you can just access the params directly

ngOnInit() {
    this.route.queryParams

      .subscribe(params => {
        console.log(params); 

        this.brand = params.id;
        console.log(this.brand); 
      });
    }

Otherwise you will need to make sure you have imported the routermodule into your child page component also. Here is a working blitz with code from above https://stackblitz.com/edit/ng-routing-starter-lbevwv

Upvotes: 2

Related Questions