Angular6 - передача вызова службы в качестве ссылки на дочерний компонент

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
},

заказ 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 функцию стрелки

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

Или вы можете указать значение this, используя Function.prototype.call()