OnScroll事件不起作用 - Angular Dart

Question

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

这是我的第一次尝试：

  @override
  void ngOnInit() {

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

但它不起作用。

我基本上需要onScroll事件。不多。所以我在Html中尝试了“老派”的方式

我的第二次尝试：

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

       <!--Some content-->

    </div>

但它也没有用。

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

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

Answer 1

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

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

<div>Some scrollable content</div>

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

第一解决方案

使用@ViewChild注释。为此，你需要在template reference variable上添加一个div。我把它称为“可滚动”，但是你可以如何调用它。

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

然后将以下属性添加到组件类：

@ViewChild("scrollable")
  Element scrollable;

第二个（但不推荐）解决方案：

在div中添加一个id（id的名称无关紧要）：使用div提供的document.getElementById()获取对dart:html的引用：

Element scrollable = document.getElementById('scrollable')

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

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

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

Answer 2

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

这几乎适用于我的测试。 您确定要添加侦听器的位置实际上是滚动的吗？