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 未在 Angular 更新周期中运行。您需要在 NgZone 中运行更改

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