Угловой 4, используя «это» в дочернем объеме

Question

Я передаю функцию в качестве входа для дочернего компонента.Обратный вызов обращается к члену дочернего компонента и переключает значение:

rowAction(contact) {
  this.currentlySelectedValues.toggle(contact.id);
}

Сама функция работает, но компилятор Angular жалуется, потому что:

error TS2339: Property 'currentlySelectedValues' does not exist on type 'SelectListTabComponent'.

Я знаю, что навремя объявления currentlySelectedValues не существует в this, но как только функция пройдена, она получает правильную область.

Есть ли лучший / другой способ сделать это?Это не будет работать в производстве, так как компилятор не будет его строить.

РЕДАКТИРОВАТЬ:

Я передаю функцию следующим образом:

<child-component
  [rows]="dataService"
  [initiallySelectedValues]="initiallySelectedValues"
  [columns]="displayColumnsObjects"
  [select]="true"
  [multiSelect]="multiSelect"
  (selectionChanged)="onSelectionChange($event)"
  [rowClickAction]="rowAction">
</child-component>

В дочернем компонентеЯ получаю это как:

  @Input() rowClickAction: Function;

И, наконец, я проверяю компонент, если я прошел один (так как он может быть не установлен)

  doRowClickAction(row: any): void {
    if (this.rowClickAction) {
      this.rowClickAction(row);
    }
  }

Answer 1

В этом сценарии вы действительно должны использовать свойство @Output, как указано в комментариях

Child

@Output() rowClickedEvent = new EventEmitter<any>();

  doRowClickAction(row: any)
  {
    if(this.rowClickedEvent)
    {
      this.rowClickedEvent.emit(row);
    }
  }

Parent(html)

<child (rowClickedEvent) = "onRowEvent($event)"

Parent (ts)

onRowEvent(row)
{
    this.valueFromEvent = row;
}

Таким образом, у вас нет проблем с this и контекстом.

Примечание

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

rowAction = (contact) => {
  this.currentlySelectedValues.toggle(contact.id);
}

Использование этого вида объявлений сохранит вызывающий контекст, поэтому this будет ссылаться на родительский компонент, а не на дочерний компонент.Но вы действительно должны пойти с @Output событиями

Вот демоверсия stackblitz , показывающая оба метода

Answer 2

объявите this.currentlySelectedValues =0 или this.currentlySelectedValues = "" в соответствии с типом переменной в ngOninit().Затем компилятор может обнаружить допустимое свойство перед самим вызовом.