如何在Angular 2中使用Scrollspy&Affix

Question

我注意到你不能在角度2组件引导功能中使用 data-spy="affix"

有谁知道如何在角2中使用词缀和scrollspy？(例子)

Answer 1

你可以编写你的小指令,它会做同样的事情.我正在分享我的代码:

指示:

@Directive({
 selector: '[scrollPoint]'
})
export class ScrollPointDirective {
   @Input() scrollPoint: number;
   constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer,
    private el: ElementRef
 ) { }

   @HostListener('window:scroll', [])
   onWindowScroll() {
      const windowScroll = this.document.body.scrollTop;
      if (windowScroll > this.nsgScrollPoint) {
        //add class to the native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', true);
      } else {
        //remove class from native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', false);
      }

   }

 }

@Input scrollPoint参数可以从HTML传递

HTML:

 <div [scrollPoint]="235">
    <ul class="nav-stacked">
       //your code
    </ul>
 </div>

将CSS添加到指令中添加的类:

CSS

.sticky-nav {
  position: sticky;
  top: 90px;
  bottom: 0;
 }

我也无法将词缀集成到angular2,但这对我来说也是如此.希望能帮助到你.