ROUTAGE
Angular facilite la récupération d’informations telles que les paramètres et les données du routeur sans avoir à utiliser le module ActivatedRoute. Voici comment le faire :
- Activez la fonctionnalité bindToComponentInputs dans la fonction
RouterModule ou provideRouter. - Ajoutez le décorateur @Input() aux propriétés auxquelles vous souhaitez lier les informations du routage.
Voici un exemple de fichier de configuration des routes dans une application Angular :
App-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { UserComponent } from ‘./user/user.component’;
const routes: Routes = [
{path:’users/:surname’, component: UserComponent, }
// Définir un path vers la page user avec un paramètre toSignal
.
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {bindToComponentInputs: true})
//Activer en ajoutant dans l’objet RouterModule l’option {bindToComponentInputs:
true}
.
],
exports: [RouterModule]
})
export class AppRoutingModule { };
User.component.ts
@Component({
selector: ‘app-user’,
templateUrl: ‘./user.component.html’,
styleUrls: [‘./user.component.scss’],
})
export class UserComponent {
@Input() surname?: string;
//Avec le décorateur @Input()
on récupère directement le paramètre de routage.
ngOnInit() {
console.log(‘User surname : ‘, this.surname);
}
}