Làm thế nào để sử dụng Scrollspy & đóng ở góc 2

Question

tôi nhận thấy rằng bạn không thể sử dụng ở góc 2 thành phần tính năng bootstrap như data-spy="affix"

Có ai biết làm thế nào để sử dụng đóng và scrollspy ở góc 2? (Example)

Answer 1

Bạn có thể viết chỉ thị nhỏ của bạn sẽ làm điều tương tự. Tôi chia sẻ mã của tôi:

Chỉ thị:

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

    } 

} 

Tham số @Input scrollPoint có thể được truyền từ HTML của bạn

HTML:

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

Thêm CSS để lớp thêm trong chỉ thị:

CSS

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

tôi đã không thể tích hợp đóng vào angular2 là tốt, nhưng điều này đã làm nó cho tôi. Hy vọng điều đó sẽ hữu ích.

Answer 2

Bạn không cần chỉ thị để làm việc này (Góc 5.0).

1) Chắc chắn bootstrap 3 được nạp <script src="assets/js/bootstrap.min.js"></script>

2) Cần phải xác định phần tử nơi cuộn tràn có thể nhìn thấy. <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

Trừ khi thanh cuộn của bạn có nguồn gốc từ window, bạn cần phải xác định data-target

3) Theme yếu tố của bạn một chút, ex. &.affix { width: 180px }

Phương pháp này thậm chí còn hoạt động đối với trang được nhúng bên trong con của bộ định tuyến.