ionic4 Angular 7 query params subscribe is not triggering on every change when using ion-router-outlet

Asked Dec 31 '18 at 09:31

Active Jan 02 '19 at 14:08

Viewed 480 times

This is my code

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.page.html',
  styleUrls: ['./landing.page.scss'],
})
export class LandingPage implements OnInit {

  constructor(private activatedRoute: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe( (params: Params) => {
      console.log(params);
    });
  }

  navigate(query) {
    this.router.navigate(['/landing'], {
      queryParams: {mode: query},
    });
  }

}

My Html code is

<ion-content padding>
  <h3>
      <a (click)="navigate('signIn')" >Sign In</a>
  </h3>
  <h3>
      <a (click)="navigate('signOut')">Sign Out</a>
  </h3>
</ion-content>

Also I tried like

<a fill="clear" [routerLink]="['/landing']" [queryParams]="{'mode':'signIn'}">Tour of Heroes</a>

I'm trying to subscribe the query params. But it is not 'console' the changes when ever there is a change.

It works in 'router-outlet', but not in 'ion-router-outlet' Can some one please tell me what I'm doing wrong here? Thank you.

edited Jan 02 '19 at 14:08

asked Dec 31 '18 at 09:31

e.k

1,333
1
17
36

Please provide us with some working example. You could make minimal working app on StackBlitz – Sergey Dec 31 '18 at 10:56
This is working in angular 6 – e.k Dec 31 '18 at 11:04
I put it simple for understanding. – e.k Dec 31 '18 at 11:05
This is all it takes to subscribe activated route query params – e.k Dec 31 '18 at 11:07
That doesn't clarify anything. Without working code there is no help possible since there might be millions of cases and you don't show what you are doing – Sergey Dec 31 '18 at 11:42
I have pasted my code. – e.k Jan 02 '19 at 10:37
Works pretty well https://stackblitz.com/edit/angular-owgo1a?file=src%2Fapp%2Fapp.module.ts – Sergey Jan 02 '19 at 11:57
There is a chance that you are subscribing to your router after it's changed. As a workaround you may place your "listener" on a global component which is present all the time. – Sergey Jan 02 '19 at 11:59
In angular 7 it works fine, but not in ionic 4 with angular 7 – e.k Jan 02 '19 at 12:54
1

Also it console when page gets loaded but not on query params change – e.k Jan 02 '19 at 13:01

ionic4 Angular 7 query params subscribe is not triggering on every change when using ion-router-outlet

0 Answers0