Question

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

有谁知道如何在角度2中使用词缀和scrollspy？（Example）

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，但这对我来说也是如此。希望它有所帮助。

Answer 2

您不需要指令来实现此功能（Angular 5.0）。

1）确保加载了bootstrap 3 <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

2）需要识别溢出滚动可见的元素。 window

除非您的滚动条源自data-target，否则您需要指定&.affix { width: 180px }

3）主题你的元素，ex。 thread

此方法甚至适用于嵌入路由器子项内的页面。

如何使用Scrollspy＆amp; Angular中的词缀2

2 个答案: