Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
<纳税类=“ResponsiveContainer__Nav-ihlltb-6 drzDiw"> 帖子 yobet软件 雇用我 恢复
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式“></a>
          </div>
          <article class=

使用@hostlistener的Angular 2窗口滚动事件

角度2很棒,但它也是角度1的主要偏离。其中一个变化是$窗口服务不在角度2。我正在使用物质化并希望在基于身体的偏移量的偏移量固定导航栏与相对的情况下切换。我的旧学校事件驱动的方法踢了进来,我想注射窗口对象进入我的组件,因此我可以检测窗口何时滚动。

我能够创建一个注入浏览器的本机窗口对象的服务,但我也希望保留我的代码依赖于浏览器,以便我可以轻松地运行测试。所以,我抛弃了在学习后注射窗口对象的想法@hostlistener.装饰师在棱角。

@hostlistener装饰师

我找不到有关这件事的太多信息@hostlistener.Docs中的装饰员,只有API中的接口规范。但是,我能够通过其他博客和堆栈溢出问题学习的问题是主机营器使我们能够在主机上侦听事件,并指定作为装饰功能或类的参数传递的值。

在此示例中,我想听窗口的滚动事件。这是一个简单的标记:

进口{HostListener.}“@ Angular / Core”;@HostListener.“窗口:滚动”[]onwindowscroll.{//当窗口滚动时,我们会在此处执行一些内容}

我此处的主要关注点是,我创建了对浏览器的依赖窗口目的?我不知道答案。如果我确实发现,我一定会发布更新。但是,这比从服务中注射窗口的更容易。

onwindowscroll()滚动窗口滚动时,现在将触发我的组件类中的方法。

我想做的下一件事就是确定身体抵消了。通过这种方式,我可以在用户滚动到页面时逐渐消失,例如100像素。

注入文档对象

为了确定身体的scrolltop.我们需要注射的价值文件目的。为此,Angular 2提供了一个文件依赖项注入(di)令牌获取应用程序的渲染上下文,并且在浏览器中呈现时,这是浏览器的文档对象。

进口{注入}“@ Angular / Core”;进口{文件}“@ Angular / Platform-Browser”;出口layoutnavcomponent.实施oninit.{构造函数@注入文件私人的文件文件{}}

首先,我导入了注入装饰师以及文件迪令。然后,在我的组件的构造函数中,我可以注入文件目的。现在我有文件,我可以用它来轻松确定scrolltop.在我的价值onwindowscrolled()方法。

窗口服务

就像与文档对象一样,它是最好的练习,不能直接引用DOM,包括窗口目的。这是注入的简单服务窗口对象进入我们的组件:

进口{isplatformbrowser.}“@ Angular / Common”;进口{ClassProvider.FactoryProvider.注射议步platform_id.}'@ Angular / Core';/ *创建一个新的注射令牌,用于将窗口注入组件。* /出口const窗口=注射议步'windowtoken';/ *定义抽象类以获取对全局窗口对象的引用。* /出口抽象windowref.{得到本地窗德窗口|目的{错误'未实现。';}}/ *定义实现抽象类的类并返回本机窗口对象。* /出口browserwindowref.延伸windowref.{构造函数{;}得到本地窗德窗口|目的{返回窗口;}}/ *创建一个出厂函数返回本机窗口对象。* /出口功能WindowFactory.browserwindowref.browserwindowref.平实践目的窗口|目的{如果isplatformbrowser.平实践{返回browserwindowref.本地窗德;}返回目的;}/ *为使用browserwindowref类的Windowref令牌创建一个可注射提供程序。* /出口constBrowserWindowProvider.ClassProvider.={提供windowref.useclass.browserwindowref.};/ *创建一个可注射的提供程序,它使用WindowFactory函数返回本机窗口对象。* /出口constWindowProvider.FactoryProvider.={提供窗口uderfactory.WindowFactory.DEPS.[windowref.platform_id.]};/ *创建一个提供者数组。* /出口constwindow_providers.=[BrowserWindowProvider.WindowProvider.];

注意,您必须提供window_providers.在里面app.module.ts.装饰师提供者数组:

进口{window_providers.}'./window.service';@ngmodule.{进口[浏览器]宣言[应用程序]引导[应用程序]提供者[window_providers.]}出口appmodule.{}

然后,使用此服务,我们可以注入浏览器的本地人窗口对象进入我们的组件,例如:

进口{注入}“@ Angular / Core”;进口{文件}“@ Angular / Platform-Browser”;进口{窗口}“./window.service”;出口layoutnavcomponent.实施oninit.{构造函数@注入文件私人的文件文件@注入窗口私人的窗口窗口{}}

零件

这是我的组件的样子:

进口{零件HostListener.注入oninit.}“@ Angular / Core”;进口{文件}'@ Angular / platform-b​​rowser';进口{窗口}“./window.service”;@零件{选择器“app-layout-nav”TemplateURL.“./layout-nav.component.html”样式堡垒[“./layout-nav.component.scss”]}出口layoutnavcomponent.实施oninit.{上市Navisfixed.布尔基=;构造函数@注入文件私人的文件文件@注入窗口私人的窗口{}ngoninit.{}@HostListener.“窗口:滚动”[]onwindowscroll.{=这个窗口PageyOffset.||这个文件文件信息scrolltop.||这个文件身体scrolltop.||0.;如果>100.{这个Navisfixed.=真正;}其他如果这个Navisfixed.&&<10.{这个Navisfixed.=;}}}

使用Navisfixed.布尔值我可以轻松更新名为的类固定我申请了包裹我的元素

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。