Bağlantı noktasına gidin Çalışmıyor

Question

Aşağıdaki sözdizimini kullanarak bir bağlantı bağlantısına ilerlemeye çalışın. tıklandığında tarayıcının adres çubuğu #test parçasını gösterir ama otomatik kaydırma oluşmaz zaman

<a [routerLink]="['./']" fragment="test">Testing</a> 

Ve çapa düğümü bu

<div id="test"> 

benziyor. Kaybolmadığı fikri var mı?

Answer 1

Kaydırma, açısal 2 ile henüz uygulanmadı. Benzer soruna olan çözümüm (aynı sayfaya demir atmak için kaydırma), ng2-page-scroll kullanmaktı.

Answer 2

@vsavkin çözüm ve alma avantajı fragmanları gözlemlenebilir olarak sağlanmıştır ("Açısal/çekirdek @" kullanılarak "^ 2.3.1") göre

class MyAppComponent implements OnInit{ 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.route.fragment.subscribe(f => { 
     const element = document.querySelector("#" + f) 
     if (element) element.scrollIntoView(element) 
    }) 
    } 
} 

Answer 3

Bu kullanılarak makbul

scroll(container, target) { 
    let scrollTo = target.getBoundingClientRect().top; 

    $(container).animate({ 
     scrollTop: `+=${scrollTo}` 
    }, 900); 
} 

sonra HTML böyle bir şey yapmak

<div #container> <!-- Scrolling container --> 
    <button (click)="scroll(container, intro)">Go To Intro</button> 
    <!-- other content --> 
    <div #intro></div> 
</div> 

Answer 4

Ben

ng2-page-scroll

Html bileşeninde sizin app.module.ts içinde

import {Ng2PageScrollModule} from 'ng2-page-scroll'; 

@NgModule({ 
    imports: [ 
     /* Other imports here */ 
     Ng2PageScrollModule 
     ] 
}) 
export class AppModule { 
} 

testini o

npm install ng2-page-scroll --save 

ithalat yüklemek kullanıcı NG2 sayfalık-kaydırma için önerebilirsiniz

<a pageScroll href="#test">Testing</a> 
<div id="test">