Угловое событие 6 прокрутки

Question

У меня есть событие прокрутки, реализованное на моем компоненте с помощью Angular's cdkScrollable.

Мой код выглядит ниже

export class HomeComponent {
    public hide = true;

    constructor(public scrollDispatcher: ScrollDispatcher) {
        this.scrollDispatcher.scrolled().subscribe((cdk: CdkScrollable) => {
            offset = cdk.getElementRef().nativeElement.scrollTop || 0;

            if (offset > 50) {
                this.hide = false;
            } else {
                this.hide = true;
            }
        });
    }
}

И мой home.component.html имеет следующий код

<p>{{hide}}</p>

проблема в том, что значение hide не изменяется даже при прокрутке за 64, но в console.log оно изменяется.

Что я делаю неправильно?

Answer 1

ScrollDispatcher не работает в цикле углового обновления. Вам нужно запустить свои изменения в NgZone

this.zone.run(_ => {
  this.hide= false;
});

Answer 2

Попробуйте это: 1. Импортируйте NgZone:

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';

2. Создайте частный доступ к NgZone в конструкторе и обновите значения, используя NgZone:

   constructor(private scroll: ScrollDispatcher, private zone: NgZone) { this.scrollDispatcher.scrolled().subscribe((cdk: CdkScrollable) => { this.zone.run(() => { // Your update here! }); }) }Для получения дополнительной информации прочитайте эту статью: https://sumodh.com/2018/03/31/how-to-force-update-a-variable-in-angular-4-angular-5/

Answer 3

Я использовал ChangeDetectorRef из @angular/core для запуска обнаружения изменений вручную.

export class HomeComponent {
    public hide = true;

    constructor(
        public scrollDispatcher: ScrollDispatcher,
        private cdr: ChangeDetectorRef
    ) {
        this.scrollDispatcher.scrolled().subscribe((cdk: CdkScrollable) => {
            offset = cdk.getElementRef().nativeElement.scrollTop || 0;

            if (offset > 50) {
                this.hide = false;
                this.cdr.detectChanges();
            } else {
                this.hide = true;
                this.cdr.detectChanges();
            }
        });
    }
}