как получить по id один объект из удаленного JSON API с токеном в Angular 2+

есть удалённый API с доступом через токен: массив объектов, в которых один из ключей - id: string.

сервис, в котором есть метод getAll() для вcех объектов и getById() для одного из них

job.service.ts

export class JobService {

  constructor(private http: HttpClient) {}

  url: string =
  'https://api.json-generator.com/templates/......';

  getAll(): Observable<Jobs[]> {
    return this.http.get<Jobs[]>(this.url)
  }

  getById(id: string): Observable<Jobs> {
    const path = `${this.url}`;
    return this.http.get<Jobs>(path)
  }
}

из сервиса я без проблем вытягиваю весь массив и взаимодействую с ним в шаблоне, выводя каждый объект отдельной карточкой

job-list.component.ts

export class JobListComponent implements OnInit {

  constructor(private jobService: JobService) {}

  jobList$ = this.jobService.getAll().pipe(map((newsList) => newsList));

  ngOnInit(): void {}
}

в каждой из карточек через routerLink и queryParams в шаблоне я хочу перейти к отдельной компоненте карточки, на которую я кликнул:

job-list-card.component.html

          <a routerLink="/details" [queryParams]="{ id: jobs.id }">
            <h2 class="card-info__title">
              {{ jobs.title }}
            </h2>
          </a>

но по итогу я перехожу на отдельную страницу, где нет никаких динамических данных из API. только шаблон и стили

job-detail.component.ts - ts-файл компоненты

export class JobDetailComponent implements OnInit {
  
  jobs: Jobs | undefined;

  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private jobService: JobService
  ) {}

  ngOnInit(): void {
    this.getJob();
  }

  getJob(): void {
    const id = String(this.route.snapshot.paramMap.get('id'));
    this.jobService.getById(id)
      .subscribe(jobs => this.jobs = jobs);
  }

  goBack(): void {
    this.location.back();
  }
}

как мне вытянуть данные конкретного объекта на отдельной компоненте?