Ionic 5 Angular - Access Tab Page from Tabs Page

Ionic Framework
1

I’m trying to access a tab page from the tabs page with the following code. But this.tab1Page shows up as undefined in ngAfterViewInit. I’ve tried lots of other ways with no success. Any pointers on how to go about this?

import { Component, ViewChild } from '@angular/core';
import { Tab1Page } from '../tab1/tab1.page';

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

  constructor() {}

  @ViewChild(Tab1Page) tab1Page: Tab1Page;

  ngAfterViewInit() {
    console.log(this.tab1Page.tabId);
  }

}
2

While you wait for better answers, I’m going to say that every time I’ve felt the need to do something like this, I eventually regretted it and changed the design.

My life is much easier when my various bits of code interact with one another only through well-defined interfaces. In Angular, when it comes to components talking to one another, that means either using @Input and @Output bindings or mutually injected service providers. Trying to directly get a reference to component B from component A and then twiddle in its innards or call methods directly on it has always resulted in pain.