Issue
Routes
{path:'dashboard',component: DashboardComponent },
{path:'dashboard/:id',component: DashboardComponent },
Router Links
<li><a [routerLink]="['/dashboard', 'kRX4eLiwmEau8X2SdoKScA==']">Appliances</a></li>
<li><a [routerLink]="['/dashboard', 'FQtZRfDqtkGrn2II8HobZw==']">Tools and Gadgets</a></li>
<li><a [routerLink]="['/dashboard', 'EMz9RMY4RESyKtvFVAJTVQ==']">Table Linen</a></li>
<li><a [routerLink]="['/dashboard', 'BamlddxbUk2lx3uhaT4Hbg==']">Bakeware</a></li>
<li><a [routerLink]="['/dashboard', 'VZxPmhcsxEmOGLTvp5Mvxw==']">Serveware</a></li>
<li><a [routerLink]="['/dashboard', 'QEkCu3nN5UWYBHmCOuvGUA==']">Serveware</a></li>
<li><a [routerLink]="['/dashboard', 'DKHH6dljMkWazcakJSxC1g==']">Decor</a></li>
Code
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
});
console.log( this.id )
let postdata = {
id :this.id
}
axios({
method: 'post',
data: this.serializeObj(postdata),
url: this.initialapi+'/Product/GetProducts',
headers: {
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(response => {
console.log(_.uniqBy(response.data,'id'))
this.productlist = _.uniqBy(response.data,'id')
})
.catch(function (error) {
console.log(error);
});
}
What i want to do is that when i click on any router link then the params will be stored in a variable and goes to my post hit, it is working though when i refresh my page cause i am using the http hit on ngOnInit()
.
how can i get this work when i click on a link and it gets me the data and is there any way i can get this data whenever click the route and get me the data on same route
Solution
This is how done it and it is working now
this.route.paramMap.subscribe(params => {
console.log(params.get('id'));
this.id = params.get('id');
// data hit
let postdata = {
id :this.id
}
axios({
method: 'post',
data: this.serializeObj(postdata),
url: this.initialapi+'/Product/GetProducts',
headers: {
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(response => {
console.log(_.uniqBy(response.data,'id'))
this.productlist = _.uniqBy(response.data,'id')
})
.catch(function (error) {
console.log(error);
});
});
Answered By – Haroon Aslam
Answer Checked By – David Marino (AngularFixing Volunteer)