Angular 滚动间谍指令 ngx-scrollspy

Angular 滚动间谍指令 ngx-scrollspy
插件名称 ngx-scrollspy
发布时间 2020年4月10日
插件作者 uniprank

这是一个Angular服务,用于监视来自window 或任何其他可滚动元素的滚动事件。

该库实现了从滚动间谍指令中收集可观察对象的服务。

安装:

#NPM
$ npm install @ uniprank / ngx-scrollspy --save

如果您使用SystemJS来加载文件,那么如果您不使用它,则可能必须使用defaultJSExtensions: true:此配置更新

System.config({
  packages: {
    '@uniprank/ngx-scrollspy': { defaultExtension: 'js' }
  }
});

最后,您可以在Angular项目(NOT AngularJS)中使用ngx-scrollspy。建议实例化ScrollSpyService应用程序的引导程序,并且不要将其添加到组件的“ providers”属性中,这样您就可以将其保持为单例。如果将其添加到组件的“ providers”属性中,它将实例化将不会初始化的服务的新实例。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollSpyModule } from '@uniprank/ngx-scrollspy';
@NgModule({
  imports: [BrowserModule, ScrollSpyModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

参数

导入模块时,可以将可选参数传递给实例。

参数 描述
lookAhead 布尔值 即使第一个项目不在视口中,也将其设置为活动状态
@NgModule({
imports: [NgxScrollspyModule.forRoot({ lookAhead: true })]
})
export class AppModule {}