Angular 6 - использовать функцию из дочернего компонента

Question

Я программирую приложение, и моя проблема в Angular 6 и Ionic Framework .

У меня есть родительский компонент с 4 дочерними "страницами" (компоненты).Я хочу вызвать функцию scrollToTop() в дочернем компоненте, чтобы прокрутить страницу до верха.

TabsPage предлагает 4 кнопки (как в Instagram, где вы можете перемещаться по приложению).

Родительский компонент:

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

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss'],
})
export class TabsPage {
  @ViewChild(Tab1Page) tab1: Tab1Page;
  @ViewChild(Tab2Page) tab2: Tab2Page;
  @ViewChild(Tab3Page) tab3: Tab3Page;

  up2(){
    this.tab2.scroll2();
  }

  up3(){
    this.tab3.scroll3();
  }

HTML:

<ion-tabs>

    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" (click)='up1()'>
            <ion-label>Tab1</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" (click)='up2()'>
            <ion-label>Tab2</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" (click)='up3()'>
            <ion-label>Tab3</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab4" (click)='up4()'>
            <ion-label>Tab 4</ion-label>
        </ion-tab-button>

    </ion-tab-bar>

</ion-tabs>

Дочерний компонент (Tab3):

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  @ViewChild(IonContent) content: IonContent;

  scroll3(){
    this.content.scrollToTop(0);
  }
}

Это код ошибки:

ОШИБКА TypeError: Невозможно прочитать свойство 'scroll3' из неопределенного