कैसे कोणीय में Scrollspy और Affix उपयोग करने के लिए 2

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> 

वर्ग निर्देश में जोड़ा सीएसएस जोड़ें:

सीएसएस

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

मैं प्रत्यय को एकीकृत करने के साथ-साथ angular2 करने में सक्षम नहीं किया गया है, लेकिन यह मेरे लिए ऐसा किया। उम्मीद है कि यह मदद करता है।

Answer 2

आप इस काम के (कोणीय 5.0) प्राप्त करने के लिए एक निर्देश की जरूरत नहीं है।

1) यकीन है कि बूटस्ट्रैप 3 <script src="assets/js/bootstrap.min.js"></script>

2 भरी हुई है बनाओ) तत्व की पहचान के लिए जहां ओवरफ़्लो स्क्रॉल दिख रहा है की आवश्यकता है। <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

जब तक आपकी स्क्रॉलबार window से उत्पन्न है, तो आप data-target

3) थीम अपने तत्व एक सा, पूर्व निर्दिष्ट करने के लिए की जरूरत है। &.affix { width: 180px }

यह दृष्टिकोण राउटर के बच्चों के अंदर एम्बेडेड पेज के लिए भी काम करता है।