どのように私はあなたのような角度2つのコンポーネントのブートストラップ機能では使用できないことに気づいた

Question

2角度でScrollspy＆接辞を使用する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スクロール・パラメータは、あなたの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）ブートストラップ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を指定する必要があります）テーマあなたの要素ビット、EX。 &.affix { width: 180px }

このアプローチは、ルータの子に埋め込まれたページでも機能します。