Usare @Input per leggere i parametri di routing in Angular 16
Dalla versione 16 di Angular possiamo leggere i parametri di routing attraverso @Input.
E sinceramente la trovo una bella comodità.
In questo articolo vediamo come usarlo e quali modifiche adottare.
Partiamo dall'esempio classico.
Partiamo dal routing:
import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {PaginaComponent} from "./pagina/pagina.component";
import {HomeComponent} from "./home/home.component";
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot([
{path: '', component: HomeComponent},
{path: 'pagina/:nome', component: PaginaComponent},
])
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Abbiamo solo due pagine.
Nella home abbiamo solo un link che riporta all'altra pagina:
<a [routerLink]="['/pagina/matteo']" routerLinkActive="active">Vai alla pagina</a>
Invece nella seconda pagina abbiamo questo:
import {Component, inject, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-pagina',
templateUrl: './pagina.component.html',
styleUrls: ['./pagina.component.css']
})
export class PaginaComponent implements OnInit{
private route = inject(ActivatedRoute);
ngOnInit(): void {
const nome = this.route.snapshot.paramMap.get('nome');
if (nome) {
console.log(nome);
}
}
}
Se vogliamo usare @Input, dobbiamo fare una modifica alle routes:
import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {PaginaComponent} from "./pagina/pagina.component";
import {HomeComponent} from "./home/home.component";
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot([
{path: '', component: HomeComponent},
{path: 'pagina/:nome', component: PaginaComponent},
{path: '**', redirectTo: '/notfound'},
],
{
bindToComponentInputs: true
}
)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Abbiamo aggiunto l'opzione bindToComponentInputs.
Poi nella nostra pagina:
import {Component, inject, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-pagina',
templateUrl: './pagina.component.html',
styleUrls: ['./pagina.component.css']
})
export class PaginaComponent implements OnInit {
@Input() nome? = '';
ngOnInit(): void {
console.log(this.nome);
}
}
Non ci sono altre modifiche da effettuare!
Enjoy!
javascript angular routing input bindtocomponentinputs
Commentami!