如何将组件函数的返回值传递给angular服务

Question

在下面的html页面中，我正在使用ngFor循环从json数组的bootstrap面板中显示作业详细信息。每个面板都显示带有jobid的特定作业详细信息。我这里有click事件。此click事件触发TS文件中的onclick方法。

jobseeker.component.html

<div *ngFor='let joblist of joblists?.all_search_view' >
    <a style="text-decoration:none" (click)="onclick(joblist.job_id)" routerLink="/each-job-detail"
    routerLinkActive="router-link-active">
  <div class="panel panel-default">
    <div class="panel-body bg-color" style="margin-left: 5px">
        <h3 style="color: #00a4e0;margin-top: 10px;"> </h3>
        <p style="font-size: 18px">{{joblist.role}}
          <span style="float:right;margin-right: 5px">{{joblist.job_add_date}}</span> </p>
        <div class="row">
          <div class="column">Job Location: {{joblist.location}}</div>
          <div class="column">Job Id: {{joblist.job_id}}</div>
          <div class="column">Salary: {{joblist.salary}}</div>
        </div>
  </div>
  </div>
   </a>
  </div>

jobseeker.component.ts

当我在面板上单击时，此onclick方法将在我的控制台中返回jobid。

    import { Component, OnInit } from '@angular/core';
import { JoblistService } from 'src/app/service/joblist/joblist.service';

@Component({
  selector: 'app-jobseeker',
  templateUrl: './jobseeker.component.html',
  styleUrls: ['./jobseeker.component.css']
})
export class JobseekerComponent implements OnInit {

  public joblists: any = {};
  constructor(private _joblistsService: JoblistService) { }

  ngOnInit() {
    this._joblistsService. getjoblists()
    .subscribe(data => this.joblists = data);
  }
  onclick(jobid: BigInteger) {
  console.log(jobid);
}
}

我想将此Jobid传递给以下服务之一（ex：id = jobid）。因为此Jobid将在服务URL中用作（this.id）。我该怎么做。

jobdetails.service.ts

    import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { Jobdetail } from './jobdetail';

@Injectable({
  providedIn: 'root'

})
export class JobdetailService {

  id = jobid;

   private _url: any = 'http://13.126.181.94:8087/job_detail_description.php?job_id='+ this.id + '&action=filter';
   constructor(private http: HttpClient) {
  }
    getjobdetails(): Observable<Jobdetail[]> {
    return this.http.get<Jobdetail[]>(this._url);
  }
}

谢谢。

Answer 1

如果要将作业ID传递给getjobdetails();方法，则可以将其作为参数传递给

之类的函数。

job-seeker.component

constructor(private _joblistsService: JoblistService, 
            private _jobDetailService : JobdetailService) { }

onclick(jobid: BigInteger) {
  console.log(jobid);
  this._jobDetailService .getjobdetails(jobid).subscribe().
}

还要相应地修改您的JobdetailService服务

getjobdetails(id): Observable<Jobdetail[]> {
    return this.http.get<Jobdetail[]>(this._url + '/' + id);
}

Answer 2

您还可以对服务中的id字段使用可观察的行为主题。像这样：

服务文件：

_id: BehaviorSubject<Number> = new BehaviorSubject(Number);

id: Observable<Number> = this._id.asObservable();

private _url: any = 'http://13.126.181.94:8087/job_detail_description.php?job_id='+ this._id.getValue() + '&action=filter';

通过调用next（）函数更改组件的id值，如下所示：

onclick(jobid: BigInteger) {
  this._joblistsService._id.next(jobid);
}

有关此方法的更多信息，请参考以下内容：

https://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/