The problem is that the ngOnInit is only called once because the component remains initialized after navigating to it.
One thing I’ve tried doing is binding to the click event, but the tab element actually contains everything but the tab button, so that won’t work.
<!-- binding to click event doesn't work like this -->
<ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)" (click)="tab2Clicked($event)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
The next best thing to do is to listen for router events on a high level component, such as the HomePage, and either save the data in data store like an object in a Service. Or you could use a Subject to emit the value and subscribe in other parts of your code.
Here is an example I made from the Ionic 4 tabs template:
MyService
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyService {
myVar: Subject<string> = new Subject<string>();
constructor() { }
}
HomePage
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { MyService } from '../my.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
constructor(private router: Router, private myService: MyService) {}
ngOnInit() {
this.router.events.subscribe(event => {
if(event instanceof NavigationStart) {
if(event.url == '/tabs/(contact:contact)') {
// get data from API
this.myService.myVar.next('new Data');
}
}
});
}
}