Question

我正在开发一个自定义选择组件，该组件从其父组件进行的服务调用中接收数据。如果给定的调用由于任何原因失败，则我需要将重试函数传递给select（服务调用本身）。该函数被调用，但是this没有按预期传递：

我的父组件：

<div class="form-group row mb-4">
    <div class="col-md-12 col-12">
      <custom-select [field]="fields.bank" [formControlName]="fields.bank.controlName" [errors]="submitted ? formControls.bank.errors : null">
      </custom-select>
    </div>
 </div>

fields.bank是在parentComponent.ts中定义的类型化对象，它传递一些属性，包括重试功能：

bank: {
   ...
   retryFunction: this.banksService.queryAll, //<-- banksService is a private variable defined in parentComponent's constructor
},

custom-select.component.html

<div class="select__error">
  <span>
     <a class="select__retry-link" (click)="retry()">retry</a>.
  </span>
</div>

custom-select.component.ts

retry(event?: Event): void {
    if (event) { event.preventDefault(); }
    if (typeof (this.retryFunction) === 'function') {
      this.retryFunction();
    }
  }

service.ts

constructor(
    public httpClient: HttpClient, //<-- it was initially private, but public also doesn't work.
  ) { }

public queryAll(): Observable<Bank[]> {
  return this //<-- this is referring to CustomSelectComponent, not to the service itself. Throws error.
    .httpClient
    .get<BankResponse[]>(environment.apiUrls.banks)
    .pipe(map(result => {
      return this.mapToBankModels(result);
    }));
}

我的问题是：如何在没有this不匹配的情况下正确调用服务？

Answer 1

您可以制作queryAll arrow function

public queryAll = (): Observable<Bank[]> => {
  return this
    .httpClient
    .get<BankResponse[]>(environment.apiUrls.banks)
    .pipe(map(result => {
      return this.mapToBankModels(result);
    }));
}

或者您可以使用this来指定Function.prototype.call()的值

Angular6-将服务调用作为对子组件的引用

1 个答案: