angular - Angular 6 滚动事件

Question

我使用 angular 的 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

我已经使用ChangeDetectorReffrom@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();
            }
        });
    }
}

Answer 3

试试这个： 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/