Как реактивно реагировать на изменения ввода в дочернем компоненте

Взаимодействие компонентов может работать одним из следующих трех способов:

• Установщики на свойстве @Input()
• Сервисы

Если ваш компонент является презентационным компонентом и взаимодействует только со свойствами @Input() и @Output(), то использование **сеттеров является наиболее реактивным способом **взаимодействия с дочерним компонентом.

Давайте разберемся, как это сделать!

Взаимодействие родительского компонента с дочерним

Родительский компонент передает значение дочернему компоненту со следующим синтаксисом, где userValue является свойством @Input() в дочернем компоненте

<child-component [userValue]="userValue"></child-component>

export class ChildComponent {
  @Input() userValue;
}

Установщики для свойства @Input()

Установщики на свойстве @Input() выполняют некоторую дополнительную логику при каждом изменении ввода.
Таким образом, вместо определения userValue мы определяем функцию на свойстве userValue, которая будет выполняться при каждом изменении ввода.

export class ChildComponent {
  status = false;
  @Input() set userValue(value: string) {
      this.status = true;
  }
}

Это так называемые методы доступа к свойствам, которые выполняются при установке/получении значений. Добавьте ключевое слово set перед свойством, чтобы сделать его сеттером.

Спасибо за чтение!

Пожалуйста, не стесняйтесь обращаться в Twitter или LinkedIn