OnScroll 事件不工作 - Angular Dart

Question

我对 window.onScroll 事件有疑问。该事件从未被触发。

这是我的第一次尝试：

  @override
  void ngOnInit() {

    window.onScroll.listen((Event event) => print("it works.."));
  }

但是没用。

我基本上需要 onScroll 事件。不多。所以我在 Html

中尝试了 "old school" 方式

我的第二次尝试：

    <div (scroll)="onScroll()">

       <!--Some content-->

    </div>

但它也不起作用。

在 AngularDart 中获取滚动事件的最佳解决方案是什么？

顺便说一下，我使用 AngularDart 5。

Answer 1

div.onScroll.listen((ev) {
});

这对我的测试非常有用。
您确定要添加侦听器的位置实际上是滚动的位置吗？

Answer 2

这个问题有多种解决方案。

您需要做的第一件事是获取对要从中获取滚动事件的 HTML 元素的引用。我假装此元素如下所示（在您的组件 .html 文件中）：

<div>Some scrollable content</div>

据我所知，有两种方法可以在 AngularDart 中获取对 HTML 元素的引用。

第一个解法：

使用@ViewChild annotation. For this to work, you need to add a template reference variable到div。我称它为 "scrollable"，但如何称呼它取决于你。

<div #scrollable>Some scrollable content</div>

然后将以下属性添加到您的组件 class:

@ViewChild("scrollable")
  Element scrollable;

第二种（不推荐）方案：

在div中添加一个id（id的名字无所谓）：使用 document.getElementById() provided by dart:html:

获取对 div 的引用

Element scrollable = document.getElementById('scrollable')

这个解决方案的问题是，据我所知，document 在任何 AngularDart 生命周期挂钩中都不可用。

Finally，要收听 scrollable 元素的 onScroll 流，只需在组件 class 的某处执行以下操作：

something.onScroll.listen((Event event) => print("Hurray, it works :)"))

OnScroll Event is not working - Angular Dart