Example to pass data between components in Ionic 4/angular:
using NavigationExtras interface
Especially when passing data in dialogs there is often no parent/child-relation ship. So you can't pass data in angular way (parent -> child). In Ionic 4/angular you have this feature to pass data comfortable within the router by the interface NavigationExtras.
page1 pass data to page2
page1.ts
import {NavigationExtras, Router} from '@angular/router';
import {Component} from '@angular/core';
@Component({
selector: 'page1',
templateUrl: 'page1.html',
styleUrls: ['page1.scss'],
})
export class Page1 {
public data: string;
public value: string;
constructor(private router: Router) {
}
// route page2 and set params in NavigationExtras
public routePage2() {
const navigationExtras: NavigationExtras = {
state: {
data: this.data,
value: this.value
}
};
this.router.navigate(['/page2'], navigationExtras);
}
}
page2.ts
import {ActivatedRoute, Router} from '@angular/router';
import {Component} from '@angular/core';
@Component({
selector: 'page2',
templateUrl: 'page2.html',
styleUrls: ['page2.scss'],
})
export class Page2 {
public data: string;
public value: string;
constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) {
this.data = this.router.getCurrentNavigation().extras.state.data;
this.value = this.router.getCurrentNavigation().extras.state.value;
}
});
}
}
refer to: point 4
https://ngrefs.com/router/navigationextras
https://angular.io/api/router/NavigationExtras
Top comments (0)