Question

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

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

Answer 1

您可以使用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：，如果每个部分都位于单独的（嵌套的）组件中，这也将起作用。

Angular 6 Bootstrap Affix

1 个答案: