Прослушиватель дочерних событий прокрутки Ionic 3 view не будет выполняться при загрузке страницы

Question

Я использовал ViewChild используя слайды положить в мой <ion-scroll> элемент внутри <ion-slides>, Теперь, когда страница введена или загружена, я хочу знать scrollTop положение этого прокрутки даже страница загружена.

Вот пример моего кода ниже в моем файле TS

@ViewChild('mySlider') slider: Slides;

сослаться на этот элемент <ion-scroll #scrollWeb scrollY="true">

а теперь загрузите страницу и получите this.scrollWeb которую страница не распознала после первой загрузки страницы.

ionViewWillEnter() {
    this.getPosts()
    // console.log('Slider:', this.slider);
    console.log(this.scrollWeb)
    if (this.scrollWeb) {
      this.scrollWeb.addScrollEventListener((ev) => {
        console.log(ev.target.scrollTop)
        if (ev.target.scrollTop < 2) {
          this.pulling = true
          console.log('Less than two')
        } else {
          this.pulling = false
        }
      })
    }

Когда страница войдет в scrollWeb является undefined или неизвестно. Но когда я открываю другую страницу и затем, если я возвращаюсь назад, scrollWeb теперь уже известен. Но странная вещь - он выполняет событие, только когда я возвращаюсь на эту страницу. Но почему?

Вот полная копия файла HTML

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)" *ngIf="!spinner">

    <!-- Discover -->
    <ion-slide>
      <ion-scroll #scrollWeb scrollY="true">
        <div class="pins" [ngStyle]="{'margin-top': selectedSegment=='second' ? '42px' : '0'}">

          <ion-card class="pin" *ngFor="let post of posts" no-padding [ngStyle]="{'display': post?.hidden ? 'none' : 'inline-block'}">
           <!-- Some content here -->
          </ion-card>
        </div>
      </ion-scroll>
    </ion-slide>
   </ion-slides>

У меня нет логов при первом открытии страницы.

Но когда я перехожу на другую страницу и решил вернуться назад, scrollWeb уже показывает его журнал прямо здесь ниже:

Scroll {_scrollX: false, _scrollY: true, _zoom: false, _maxZoom: 1, maxScale: 3, …}
maxScale
:
3
maxZoom
:
(...)
scrollX
:
(...)
scrollY
:
(...)
zoom
:
(...)
zoomDuration
:
250
_maxZoom
:
1
_scrollContent
:
ElementRef
nativeElement
:
div.scroll-content
__proto__
:
Object
_scrollX
:
false
_scrollY
:
true
_zoom
:
false

Журнал выше должен быть выполнен, когда я загружаю страницу правильно? Потому что я положил его внутрь IonViewWillEnter метод. Даже IonViewDidLoad тоже не работает.

Это работает только тогда, когда я захожу на другую страницу, возвращаюсь и бум, это работает.

Я пытался поместить его в конструктор, но все еще не работал, даже если я перехожу на другую страницу и возвращаюсь, если код находится в конструкторе.

Может кто-нибудь пролить свет на меня?

Ценю, если кто-то может помочь. Заранее спасибо.

Answer 1

Это просто временное решение для той же проблемы.

Я просто положил setTimeout метод и выполнить действие внутри через одну секунду.

Код здесь:

 setTimeout(() => {
      console.log(this.scrollWeb)
      if (this.scrollWeb) {
        this.scrollWeb.addScrollEventListener((ev) => {
          console.log(ev.target.scrollTop)
          if (ev.target.scrollTop < 2) {
            this.pulling = true
            console.log('Less than two')
          } else {
            this.pulling = false
          }
        })
      }
    }, 1000)

Это временное решение, но оно хорошо работает на других устройствах, таких как планшеты. Это также хорошо работает в обоих Android а также iOS Платформа протестирована и доказана.

PS: я не знал, в чем проблема IonViewDidLoad но я думаю, что это правильный метод для использования. Поправьте меня если я ошибаюсь