Jak korzystać Scrollspy i umieszcza w kątowa 2

Question

zauważyłem, że nie można używać w kątowym 2 składników bootstrap funkcji jak data-spy="affix"

Czy ktoś wie, jak używać przyrostek i scrollspy w kątowym 2? (Example)

Answer 1

Możesz napisać swoją małą dyrektywę, która zrobiłaby to samo. Dzielę mój kod:

dyrektywa:

@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); 
     } 

    } 

} 

Parametr @Input ScrollPoint mogą być przekazywane z HTML

HTML:

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

Dodaj CSS do klasy dodanej w dyrektywie:

CSS

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

I nie były w stanie zintegrować umieszcza na angular2 jak dobrze, ale to nie dla mnie. Mam nadzieję, że to pomaga.

Answer 2

Nie potrzebujesz dyrektywy, aby to działało (Angular 5.0).

1) Upewnij się, bootstrap 3 jest załadowany <script src="assets/js/bootstrap.min.js"></script>

2) należy zidentyfikować element przelewowy gdzie zwój jest widoczny. <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

O ile pasek przewijania jest pochodzi z window, trzeba określić data-target

3) tematyką elementu nieco, ex. &.affix { width: 180px }

Takie podejście działa nawet w przypadku stron osadzonych w urządzeniach potomnych routerów.