Потеря контекста при передаче функции от родителя к свойству Input () дочернего компонента - PullRequest
Новая
       5

Потеря контекста при передаче функции от родителя к свойству Input () дочернего компонента

0 голосов
/ 09 ноября 2018

Я передаю function из родительского компонента в свойство Input() моего дочернего компонента.

Проблема в том, что родительская функция вызывается в дочернем компоненте, а ключевое слово this теперь относится к контексту дочернего компонента, а не к контексту родительских компонентов.

Вот пример того, что я делаю в родительском компоненте: 

export class CustomerComponent implements OnInit {
    next(continuationToken: string): Observable<CustomerSearchResult> {
        console.log('invoked');
        return this.customerService.searchCustomersPaged("andrew");
    }
}

В шаблоне моего родительского компонента (я передаю функцию 'next' через входной параметр с именем 'nextDelegate'): 

<app-datatable [hidden]="!customersByFirstNameHasResults" [nextDelegate]="next" [serverSidePaging]="true" id="customersByFirstName" [showDeleteButton]="false" [showEditButton]="true" [responseModelObservable]="customersByFirstName"
      modelTypeName="customer" (editRow)="editCustomer($event)">
    </app-datatable>

И, наконец, в моем дочернем компоненте я пытаюсь вызвать переданный метод, но context неверен. 

export class DatatableComponent implements AfterViewInit, OnDestroy, OnInit {
  @Input() nextDelegate: (continuationToken: string) => Observable<CustomerSearchResult>;

private initializeDtOptions() {
// storing current class reference in a variable to use it in jQuery 

// function because we can't 
    //use arrow function as we might need both this' in the function
    if (this.serverSidePaging) {
      this.dtOptions = {
        pagingType: 'simple',
        serverSide: true,
        processing: true,
        pageLength: 10,
        deferLoading: 100, //this.totalRecords
        ajax: (p, callback) => {
          //called here
          that.nextDelegate("").subscribe(x => {
            callback({

            })
          });

        }
      };
    } else {
      this.dtOptions = {
        pagingType: 'full_numbers',
        columns: this.columnSettings
      };
    }
  }
}

1 Ответ

0 голосов
/ 09 ноября 2018

в контексте, я думаю, вы имеете в виду область. Это неправильно из-за того, как определена ваша функция.

Попробуйте использовать: 

export class CustomerComponent implements OnInit {
    public next = (continuationToken: string): Observable<CustomerSearchResult> => {
        console.log('invoked');
        return this.customerService.searchCustomersPaged("andrew");
    }
}

Тем не менее, это, кажется, немного вонючий. Я бы предложил использовать выходные данные или внедрить сервис для этого.

...