Nelle pagine web è ormai consuetudine inserire molti anchor tag, i quali fungono come puntatori a una specifica parte della pagina, per facilitarne la navigazione suddividendola in paragrafi o aree tematiche. Ma come è possibile ottenere lo stesso effetto all'interno di un framework come Angular nel quale la navigazione è gestita dal RouterModule?
Come primo step dobbiamo abilitare queste opzioni nel momento in cui inseriamo il modulo tra gli imports.
const options: ExtraOptions = { // permette al sistema di ricordare la posizione della pagina al momento della navigazione scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', // specifico uno spazio di offset a seguito della navigazione scrollOffset: [0, 30], }; [...] imports: [ [...], RouterModule.forRoot(routes, routerOptions) ]
Con questo setup si potranno generare degli anchor interattivi, che a seguito di un click permetteranno alla pagina di muoversi alla sezione corrispondente.
<a [routerLink]="" [fragment]="sezione-a">{{link}}</a>[...] <div class="section" id="sezione-a">
Operazione possibile anche utilizzando il metodo navigate dell'istanza Router
import { Router } from '@angular/router'; constructor(private router: Router){} navigate(){ this.router.navigate(['/'], { fragment: 'sezione-a' }); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ecco .NET 5: l'alba di una nuova era per lo sviluppatore .NET
A lap around Azure Cognitive Services
Eseguire più query che tornano un singolo dato in un solo comando con la libreria Entity Framework Plus
Utilizzare gli eventi pubblicati da SaveChanges in Entity Framework Core
Tracciabilità dei work item nel ciclo di vita del software con Azure DevOps
Creare un radio button per Blazor
Testare le impostazioni CORS di un'applicazione ASP.NET Core
Creare applicazioni web native con Electron
Introduzione a GitHub
Versioning automatico degli Azure Storage Blob
A quick tour around Azure Dev Spaces
Sviluppare codice nativo per Windows e Linux con .NET Core