Как использовать ниже HTTP-запрос для получения данных с сервера

Question

Я новичок в angular Мне дали HTTP get URL службы для получения данных с сервера. Как мне подписаться и получить данные.

/dashboard/graphics-chart/v1/{roleId}.

ниже приведен метод, который я написал в служебном файле

  getgraphdata(defaultroleID): Observable<any> {
    return this.apiService.get(WebServiceUrl.dashboard.getPiechartData + '/' + defaultroleID)
      .pipe(map(data => data));
  }

Как подписать его в файле TS.

Answer 1

Определите вашу службу в конструкторе компонентов и вызовите метод servis следующим образом:

this.yourServiceName.getgraphdata(this.defaultroleID).subscribe(res=>{
   console.log(res)
});

Answer 2

Вы можете подписаться следующим образом в своем компоненте, и чтобы прочитать roleId, вы можете ввести маршрут.

constructor(
    private yourService: YourService,
    private route: ActivatedRoute,
) { }

yourFunction() {
    let roleId = this.route.snapshot.paramMap.get('roleId');
    this.yourService.getgraphdata(roleId )
      .subscribe(result => ...do something with result);
}

Answer 3

Подпишитесь на него, как на любой другой Observable. Чтобы получить параметры из текущего URL, подпишитесь на paramMap из ActivatedRoute. Следующий компонент отправляет ваш HTTP-запрос при каждом изменении идентификатора роли.

Компонент:

import { ActivatedRoute } from '@angular/router';

export class AppComponent implements OnInit {
  constructor(
    private dashservice: DashService, 
    private _route: ActivatedRoute ) { }
}

ngOnInit() {
  // get role ID from activated route
  this.route.paramMap.subscribe(
    (params: ParamMap) => { this.getchartdata(params.get('roleId')); }
  );
}

// use roleId 'default' if no parameters are passed
private getchartdata(roleId = 'default') {
  this.dashservice.getgraphdata(roleId).subscribe(
    response => {
      // handle response
    },
    error => {
      // handle error
    }
  );
}

Кроме того, если вы не преобразуете свои данные в вызове HTTP, вы можете удалить .map и вернуть ответ HTTP напрямую.

getgraphdata(defaultroleID): Observable<any> {
  return this.apiService.get(WebServiceUrl.dashboard.getPiechartData + '/' + defaultroleID);
}