angular 5+ same routing, same component but different param, not send http get request on angular subscribe

Question

This is my app.modules

const appRoutes: Routes = [
  { path: 'topic/:topicTypeAngular', component: StoryTypeComponent, pathMatch : 'full'},
  { path: '**', component: PageNotFoundComponent}
];

This is my nav in html

<ul>
    <li> <a routerLink="topic/culture">Culture</a></li>
    <li><a routerLink="topic/tech">Tech</a></li>
</ul>

// Thid is component.ts excerpt and crucial part

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent, HttpEventType, HttpParams } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

   constructor(public http: HttpClient, private route: ActivatedRoute) {
         this.parameter = this.route.snapshot.paramMap.get('topicTypeAngular');
         let parameter = this.parameter;
    }


    ngOnInit() {
         this.route.url.subscribe(parameter => {
         let parameter = this.parameter;
          this.http.get('http://localhost:3200/cookbooks/topic/'+parameter).subscribe(httpResponse => {
              this.data = httpResponse;
              console.log(httpResponse);
            });

        })
     }

The last part does not provide me new httpResponse data. This link similar to my issue but not exact. However, I tried but failed. Thanks in advance

Why won't you subscribe to params instead? And why not use the ngOnInit(), It is provided to doing these things — Ashish Ranjan
– Ashish Ranjan, Commented Dec 9, 2018 at 12:37

Johan Rin · Accepted Answer · 2018-12-09 13:20:35Z

2

What about directly getting the params with a pipe like this :

constructor(public http: HttpClient, private route: ActivatedRoute) {    
  this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      this.parameter = params.get('topicTypeAngular');
      return this.http.get(`http://localhost:3200/something/topic/${this.parameter}`);
    })
  ).subscribe(
    result => console.log(result)
  );
}

edited Dec 9, 2018 at 13:20

answered Dec 9, 2018 at 12:55

Johan Rin

1,9483 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stavm Over a year ago

Exactly. Also, placing this on a lifecycle method and using the async pipe instead of subscribing would prefect this answer.

Ahmad Sharif · Accepted Answer · 2020-03-01 06:43:15Z

1

Try this:

constructor(public http: HttpClient, private route: ActivatedRoute) {}

    ngOnInit() {

    this.route.params.subscribe(param => this.http.get('http://localhost:3200/something/topic/' + param['topicTypeAngular']).subscribe(httpResponse => {
            this.data = httpResponse;
            console.log(httpResponse);
        });)
 }

edited Mar 1, 2020 at 6:43

Ahmad Sharif

4,4536 gold badges40 silver badges51 bronze badges

answered Dec 9, 2018 at 13:00

Tomislav

3,21120 silver badges22 bronze badges

2 Comments

Ahmad Sharif Over a year ago

perfect. you just missed a parenthesis ')'

Tomislav Over a year ago

Type it from my phone ☺

Collectives™ on Stack Overflow

angular 5+ same routing, same component but different param, not send http get request on angular subscribe

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related