Передача данных в дочерний компонент в Angular
Можно передавать данные из родительского компонента в дочерний. Эти данные будут попадать в свойства дочернего класса. Давайте посмотрим, как это делается.
Для начала сделаем в классе дочернего компонента свойства, в которые будут импортироваться данные из родительского компонента:
class UserComponent {
public name: string = '';
public age: number = 0;
}
Теперь нам нужно объявить, что
в эти свойства извне будут попадать
данные. Для этого используется
специальный декоратор Input.
Импортируем его в наш дочерний
компонент:
import { Input } from '@angular/core';
А теперь применим этот декоратор для наших свойств:
class UserComponent {
@Input()
public name: string = '';
@Input()
public age: number = 0;
}
Добавим вывод данных в файл темплейта дочернего компонента:
<p>{{ name }}</p>
<p>{{ age }}</p>
А теперь в темплейте родителя при вызове тега дочернего компонента напишем атрибуты, имена которых будут совпадать с именами наших свойств дочернего класса. Значения этих атрибутов попадут в свойства дочернего класса:
<user-data name="john" age="25"></user-data>