Saya menggunakan sudut 5. Saya memiliki dasbor di mana saya memiliki beberapa bagian dengan konten kecil dan beberapa bagian dengan konten yang sangat besar sehingga saya menghadapi masalah saat mengganti router saat pergi ke atas. Setiap kali saya perlu menggulir untuk pergi ke atas. Adakah yang bisa membantu saya untuk menyelesaikan masalah ini sehingga ketika saya mengubah router, pandangan saya selalu berada di atas.
Terima kasih sebelumnya.
Jawaban:
Ada beberapa solusi, pastikan untuk memeriksa semuanya :)
Outlet router akan memancarkan
activate
acara setiap kali komponen baru dibuat, jadi kita dapat menggunakan(activate)
untuk menggulir (misalnya) ke atas:app.component.html
app.component.ts
Gunakan, misalnya, solusi ini untuk pengguliran yang mulus:
Jika Anda ingin selektif, katakanlah tidak setiap komponen harus memicu scrolling, Anda dapat memeriksanya dalam
if
pernyataan seperti ini:Sejak Angular6.1, kita juga dapat menggunakan
{ scrollPositionRestoration: 'enabled' }
modul yang dimuat dengan penuh semangat dan ini akan diterapkan ke semua rute:Ini juga akan melakukan pengguliran halus. Namun hal ini menimbulkan ketidaknyamanan untuk melakukannya di setiap perutean.
Solusi lain adalah melakukan scrolling atas pada animasi router. Tambahkan ini di setiap transisi di mana Anda ingin menggulir ke atas:
sumber
window
objek tidak bekerja dalam sudut 5. Ada tebakan mengapa?Jika Anda menghadapi masalah ini di Angular 6, Anda dapat memperbaikinya dengan menambahkan parameter
scrollPositionRestoration: 'enabled'
ke RouterModule app-routing.module.ts:sumber
scrollPositionRestoration
properti tidak berfungsi dengan konten halaman dinamis (yaitu, di mana konten halaman dimuat secara asinkron): lihat laporan bug Angular ini: github.com/angular/angular / issues / 24547EDIT: Untuk Angular 6+, mohon gunakan jawaban Nimesh Nishara Indimagedara yang menyebutkan:
Jawaban Asli:
Jika semua gagal, buat beberapa elemen HTML kosong (mis .: div) di bagian atas (atau scroll yang diinginkan ke lokasi) dengan id = "top" pada template (atau template induk):
Dan dalam komponen:
sumber
Sekarang ada solusi bawaan yang tersedia di Angular 6.1 dengan
scrollPositionRestoration
opsi.Lihat jawaban saya di Angular 2 Gulir ke atas di Route Change .
sumber
Meskipun @Vega memberikan jawaban langsung atas pertanyaan Anda, ada beberapa masalah. Ini merusak tombol kembali / maju browser. Jika Anda pengguna mengklik tombol kembali atau maju browser, mereka kehilangan tempatnya dan digulirkan ke atas. Ini bisa sedikit menyebalkan bagi pengguna Anda jika mereka harus menggulir ke bawah untuk mendapatkan tautan dan memutuskan untuk mengeklik kembali hanya untuk menemukan bilah gulir telah disetel ulang ke atas.
Inilah solusi saya untuk masalah tersebut.
sumber
Dalam kasus saya, saya baru saja menambahkan
di
ngOnInit()
dan halus bekerja.sumber
Dari Angular Versi 6+ Tidak perlu menggunakan window.scroll (0,0)
Untuk versi Angular
6+
dari @ Mewakili opsi untuk mengkonfigurasi router.docs
Dapat digunakan
scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
dalamContoh:
Dan jika seseorang perlu untuk mengontrol pengguliran secara manual, Tidak perlu menggunakan
window.scroll(0,0)
Sebaliknya dari paket umum Angular V6 telah diperkenalkanViewPortScoller
.Penggunaan cukup mudah Contoh:
sumber
jika Anda menggunakan mat-sidenav memberikan id ke outlet router (jika Anda memiliki outlet router orang tua dan anak) dan menggunakan fungsi aktifkan di dalamnya
<router-outlet id="main-content" (activate)="onActivate($event)">
dan gunakan pemilih kueri 'mat-sidenav-content' ini untuk menggulir ke atasonActivate(event) { document.querySelector("mat-sidenav-content").scrollTo(0, 0); }
sumber
id
(Saya punya saturouter-outlet
di aplikasi saya). Saya juga melakukannya dengan lebih 'sudut':@ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer; onActivate() { this.sidenavContainer.scrollable.scrollTo({ left: 0, top: 0 }); }
Saya terus mencari solusi bawaan untuk masalah ini seperti yang ada di AngularJS. Tetapi sampai saat itu solusi ini berfungsi untuk saya, Sederhana, dan mempertahankan fungsionalitas tombol kembali.
app.component.html
app.component.ts
Jawaban dari zurfyx postingan asli
sumber
Anda hanya perlu membuat fungsi yang berisi penyesuaian scrolling layar Anda
sebagai contoh
window.scrollTo (xpos, ypos) -> parameter yang diharapkan.
sumber
Berikut adalah solusi yang hanya menggulir ke atas Komponen jika pertama kali mengunjungi komponen SETIAP (jika Anda perlu melakukan sesuatu yang berbeda per komponen):
Di setiap Komponen:
sumber
sumber
Angular 6.1 dan yang lebih baru:
Anda dapat menggunakan solusi bawaan yang tersedia di Angular 6.1+ dengan opsi
scrollPositionRestoration: 'enabled'
untuk mencapai hal yang sama.Angular 6.0 dan sebelumnya:
Catatan: Perilaku yang diharapkan adalah ketika Anda menavigasi kembali ke halaman, itu harus tetap di-scroll ke bawah ke lokasi yang sama seperti saat Anda mengklik link, tetapi scrolling ke atas saat membuka setiap halaman.
sumber
tambahkan saja
window.scrollTo({ top: 0);
ke ngOnInit ()
sumber
Untuk beberapa orang yang mencari fungsi gulir, cukup tambahkan fungsi dan panggil bila diperlukan
sumber
Coba ini:
app.component.ts
sumber
Komponen: Berlangganan ke semua acara perutean alih-alih membuat tindakan di templat dan gulir ke NavigationEnd b / c jika tidak Anda akan mengaktifkannya pada navigasi yang buruk atau rute yang diblokir, dll ... Ini adalah cara yang pasti untuk mengetahui bahwa jika rute berhasil dinavigasi, lalu gulir halus. Jika tidak, jangan lakukan apa pun.
HTML
sumber
coba ini
kode ini didukung sudut 6 <=
sumber