My app-routing.module.ts is configured as shown below:
const routes: Routes = [
{
path: "branches/:branch",
component: BranchesComponent
},
// ...
];In addition, in my app.component.html, I have the following code:
<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>Furthermore, in the branches.component.ts file, I implemented the following code:
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}`);
}Everything seems to work correctly up to this point, with the URL changing when different links are clicked. For example:
http://localhost:4200/branches/engineering
http://localhost:4200/branches/baseSciense
http://localhost:4200/branches/humanities
However, despite changing parameters in the URL, the value of the branch property in the Branches component remains the same (engineering). This inconsistency puzzles me!
How can I resolve this issue so that I can pass different parameters and capture them within the Branches component? Thank you.