0

我正在尝试在 Angular 6 上执行 Bootstrap 4 的附加或滚动监视功能。但是，我试图找到现有的库。我找到了这个JonnyBGod 的 scrollspy，但不幸的是，它仍然在 Angular 5 上并且还在使用 rxjs 5。是否有任何现有的库已经在使用 RxJS 6。你们能推荐一下吗？

顺便说一句，我试图通过使用 rxjs 的迁移指南至少使 JonnyBGod 的库与 angular 6 一起工作。但是，如果有人知道那里有任何使用 angular 6 原生编写的库，我们将不胜感激。

4

1 回答 1

3

您可以使用 thisissoon 的 angular-scrollspy。我在我的 Angular 6 项目中使用过它，它工作得非常好。

以下是设置它的步骤

第 1 步：安装

npm i @thisissoon/{angular-scrollspy,angular-inviewport} --save

第 2 步：在 app.module.ts 中导入

import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
import { ScrollSpyModule } from '@thisissoon/angular-scrollspy';

// Provide window object for browser and a suitable replacement
// on other platforms
const getWindow = () => window;
const providers: Provider[] = [{ provide: WindowRef, useFactory: getWindow }];

@NgModule({
  imports: [InViewportModule.forRoot(providers), ScrollSpyModule.forRoot()]
})
export class AppModule {}

第 3 步：将其添加到您的组件中（例如 navbar.component.ts）

<ul role="navigation" snScrollSpy id="foo">
  <li><a snScrollSpyItem for="foo" href="#home">Home</a></li>
  <li><a snScrollSpyItem for="foo" href="#about">About Us</a></li>
  <li><a snScrollSpyItem for="foo" href="#team">Team</a></li>
  <li><a snScrollSpyItem for="foo" href="#contact">Contact</a></li>
</ul>

 <sn-scroll-spy-section id="home" for="foo">
      Home Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="about" for="foo">
      About Us Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="team" for="foo">
      Team Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="contact" for="foo">
    Contact Us content
 </sn-scroll-spy-section>

PS：如果每个部分都在单独的（嵌套）组件内，这也是有效的。

于 2018-09-29T12:17:10.030 回答