Di chuyển đến liên kết không hoạt động

Question

Cố gắng cuộn đến liên kết anchor bằng cú pháp sau.

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

Và nút neo trông như thế này

<div id="test"> 

Khi nhấn vào thanh địa chỉ trình duyệt cho thấy mảnh #test nhưng di chuyển tự động không xảy ra. Bất kỳ ý tưởng tại sao nó không di chuyển?

Answer 1

Tôi cho rằng di chuyển chưa được triển khai với góc 2. Giải pháp của tôi cho vấn đề tương tự (di chuyển đến neo trên cùng một trang) là sử dụng ng2-page-scroll.

Answer 2

dựa trên @vsavkin khắc phục, và lợi dụng mà mảnh vỡ được cung cấp như một quan sát (sử dụng "@ góc/lõi": "^ 2.3.1"):

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

Tôi thích sử dụng này

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

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

sau đó trong HTML làm điều gì đó như

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

Answer 4

Tôi có thể gợi ý cho người sử dụng ng2-page-cuộn

ng2-page-scroll

cài đặt

npm install ng2-page-scroll --save 

nhập khẩu app.module.ts bạn

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

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

thử nghiệm nó trong thành phần html của bạn

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