Configuré app-routing.module.ts de la siguiente manera:
const routes: Routes = [ { path: "branches/:branch", component: BranchesComponent }, // ... ];y también en app.component.html tienen:
<li> <a [routerLink]="['/branches', 'engineering']"> engineering </a> </li> <li> <a [routerLink]="['/branches', 'baseSciense']"> baseSciense</a> </li> <li> <a [routerLink]="['/branches', 'humanities']"> humanities</a> </li> </ul> <router-outlet></router-outlet>y en barnches.component.ts codifiqué de la siguiente manera:
branch: string =''; constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.route.params.subscribe(({branch: branch1}) => this.branch = branch1); // I also tried this code: // this.route.params.subscribe(branch => this.branch = branch['branch']); // unfortunately, bellow codes have error on p.branch and params.branch! why? // this.route.params.subscribe(p => this.branch = p.branch) // this.branch = this.route.snapshot.params.branch; console.log(`branch is : ${this.branch}`); }hasta aquí todo es correcto, y la URL se cambia una vez que se hace clic en el enlace respectivo, como:
http://localhost:4200/branches/engineering http://localhost:4200/branches/baseSciense http://localhost:4200/branches/humanitiespero la rama de propiedad en el componente Ramas no cambia y tiene el mismo valor (ingeniería) para diferentes parámetros en el registro de la consola. es ilogico para mi!
¿Cómo puede resolver este problema pasar diferentes parámetros y capturarlos en el componente de sucursales? Saludos
Debe mover su console.log dentro de la suscripción. La mayor parte del código relacionado con esta función deberá tener lugar dentro de la suscripción. El componente no se vuelve a representar en el cambio de URL porque está cargando el mismo componente y angular no vuelve a representar los componentes si es el mismo componente.
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ template: 'Branch: {{branch}}', }) export class BranchesComponent implements OnInit { branch = ''; constructor(private route: ActivatedRoute) {} ngOnInit() { // Set the value every time the URL param changes. this.route.params.subscribe(({ branch }) => { this.branch = branch; console.log('branch:', this.branch); }); } }En su componente, puede suscribirse a los eventos del enrutador y escucharlos de esta manera.
this.router.events.pipe(filter(r => r instanceof NavigationEnd)).subscribe(r => { console.log((r as NavigationEnd).url); });