Использование @Input() в Angular для передачи данных от родительского к дочернему компоненту

В Angular для передачи данных от родительского компонента к дочернему часто используется декоратор @Input(). Это правильный ответ на вопрос из нашего квиза.

Декоратор @Input() применяется в дочернем компоненте к свойству, которое может получать значения от родительского компонента. Это позволяет использовать декоратор в качестве интерфейса для пропсов (свойств) компонента.

Рассмотрим практический пример. В родительском компоненте у нас есть информация, которую мы хотим передать дочернему компоненту:

@Component({
  selector: 'parent-component',
  template: `<child-component [childProp]="parentProp"></child-component>`
})
export class ParentComponent {
  parentProp = 'Привет от родителя!';
}

В этом примере childProp - это свойство дочернего компонента, которое мы хотим заполнить значением из parentProp.

В дочернем компоненте мы используем декоратор @Input() для свойства childProp, чтобы подключить его к входным данным:

@Component({
  selector: 'child-component',
  template: `<p>{{ childProp }}</p>`
})
export class ChildComponent {
  @Input() childProp: string;
}

Таким образом, мы устанавливаем связь между родительским и дочерним компонентом через @Input(). Значение, переданное через @Input(), доступно для использования в шаблоне дочернего компонента, как показано выше.

Стандарты хорошей практики подразумевают, что если у вас есть компоненты с вложенной структурой, то лучше всего использовать @Input() и @Output(), чтобы обеспечить поток данных от родительских компонентов к дочерним и обратно. Это делает ваше приложение более модульным и понятным.