Содержимое вкладки не прокручивается вверх при выборе

Question

простите, если решить простую проблему или она уже была решена здесь.Но я просто не могу понять это.Вопрос в том, у меня есть две вкладки.Находясь на странице содержимого, если я вызываю content.scrollToTop (), то он работает нормально.Но я не уверен, как прокрутить верхнюю часть страницы содержимого вкладки при нажатии или выборе вкладки?

 <ion-tabs> 
<ion-tab-bar slot="bottom">

  <ion-tab-button tab="home" **(click)="scrollToTop()"**>
    <ion-label>Home</ion-label>
    <ion-icon name="home"></ion-icon>
    <!-- <ion-badge>6</ion-badge> -->
  </ion-tab-button>

  <ion-tab-button tab="tab1">
    <ion-label>About</ion-label>
    <ion-icon name="information-circle"></ion-icon>
  </ion-tab-button>

  <!-- <ion-tab-button tab="tab2">
    <ion-label>Profile</ion-label>
    <ion-icon name="settings"></ion-icon>
  </ion-tab-button> -->

</ion-tab-bar>

  import { Component, OnInit , ViewChild } from '@angular/core';
  import { Events } from '@ionic/angular';
  import { IonContent } from '@ionic/angular';
  @Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
  })
  export class TabsPage implements OnInit {
  @ViewChild(IonContent) content: IonContent;
  constructor( public event:Events) { }


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

  }

Answer 1

Что вам нужно сделать, это использовать событие ionViewWillEnter, которое может быть объяснено далее в документации жизненного цикла Ionic Page:

• Жизненный цикл Ionic Page - Ионная документация

Если бы ваша страница была tabs2, то код мог бы выглядеть так:

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

@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {

  @ViewChild(IonContent) private content: IonContent;

  constructor() { }

  ngOnInit() {
  }

  ionViewWillEnter() {
    this.content.scrollToTop();
  }

}

Answer 2

Вы можете сохранить отдельный метод

<ion-tabs>
  <ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root" (click)="myMethod2()"></ion-tab>
  <ion-tab [root]="tab3Root" (click)="myMethod3()"></ion-tab>
</ion-tabs>

тогда напишите свою логику

myMethod()
{
 this.content.scrollToTop();

}