OnScroll事件不起作用-Angular Dart [英] OnScroll Event is not working - Angular Dart

问题描述

window.onScroll 事件有问题。该事件从未触发。

I have an issue with the window.onScroll event. The event was never triggered.

这是我的第一次尝试：

  @override
  void ngOnInit() {

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

但是它不起作用。

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

I basiclly need the onScroll event. Not more. So i tried the "old school" way in Html

第二次尝试：

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

       <!--Some content-->

    </div>

但是它也不起作用。

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

What is the best solution to get the scroll event in AngularDart?

顺便说一下，我使用AngularDart5。

By the way, i use AngularDart 5.

推荐答案

对此问题有多种解决方案。

There are multiple solutions to this problem.

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

The first thing that you need to do is get a reference to the HTML element that you want to get scroll events from. I pretend that this element looks like the following (in your components .html file):

< div>一些可滚动的内容< / div>

据我所知，有两种获取引用的方法

As far as I know, there are two ways of getting a reference to an HTML element in AngularDart.

第一个解决方案：

使用 @ViewChild 批注。为此，您需要添加模板引用变量到 div 。我称它为可滚动，但是如何命名将取决于您。

Use the @ViewChild annotation. For this to work, you need to add a template reference variable to the div. I call it "scrollable", however it is up to you how you will call it.

< div＃scrollable>某些可滚动内容< / div>

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

Then add the following property to your component class:

@ViewChild("scrollable")
  Element scrollable;

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

向 div 添加ID（ID的名称无关紧要）：
获取对<$的引用c $ c> div 通过使用 document.getElementById（） 由 dart：html ：

Add an id to the div (the name of the id does not matter): Get the reference to the div by using document.getElementById() provided by dart:html:

Element scrollable = document.getElementById('scrollable')

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

The problem with this solution is, that document is not available in any of the AngularDart life cycle hooks as far as i know.

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

Finally, to listen to the onScroll stream of the scrollable element just do the following somewhere in your component class:

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

这篇关于OnScroll事件不起作用-Angular Dart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！