2

I'm building Ionic app and I need to navigate to another page when I click on the button and pass the variable, but for some reason this.navCtrl.push() is not working.

What might be the issues? Thank you in advance.

HomePage:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CurrentWeatherPagePage } from '../current-weather-page/current-weather-page.page';
import { NavController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl:NavController){}

  cityName = ''
  logForm() {
    console.log(this.cityName);
    this.navCtrl.push(CurrentWeatherPagePage, this.cityName);
  }

  

}
Serget
  • 47
  • 1
  • 4
  • have you checked https://stackoverflow.com/questions/51828017/navcontroller-doesnt-work-in-ionic-4 ? I am only using navCtrl.navigateForward or navCtrl.navigateBackward or the router directly. – nosTa Jul 08 '22 at 06:35
  • Thank you, but how do I pass varaible to another component? – Serget Jul 08 '22 at 06:52
  • It depends. If using router.navigate you could pass a state: this.router.navigate(['/home/messages'], { state: { recipient: userId, type: messageRoomType, groupId: groupId } }); you can read it with history.state on your other page. Another approach would be creating a navigation service where you set the variables on your source page and retrieve them on your destination page. Something like that: export interface NavigationParams { sourcePage: string; targetPage: string; params: any; oldParams: any; popover: any; } – nosTa Jul 08 '22 at 07:38

1 Answers1

0

You have to use navCtrl.navigateForward and if you need to pass parameters you can do this

this.navCtrl.navigateForward(<URL>, { state: { <DATA> } } );

Then in the other view, in the constructor, do this

data: any = null ;

constructor(private router: Router) { 
    this.data = this.router.getCurrentNavigation()?.extras?.state;
}
Talon
  • 351
  • 1
  • 11