Дочерние компоненты в Angular
Как упоминалось в самом начале учебника, в Angular весь проект разбивается на компоненты. В предыдущих уроках мы работали только с основным компонентом, созданным по умолчанию. Давайте теперь научимся создавать дочерние компоненты.
Код новых компонентов автоматически
генерируется Angular с помощью специальной
команды терминала: generate component.
После слова component нужно
написать имя нашего нового компонента.
Пусть мы хотим сгенерировать компонент user:
ng generate component user
После выполнения команды мы увидим, что
у нас появилась новая папка
app/user. В ней будут находиться
все стандартные файлы компонента.
В файле с компонентом user.component.ts
будет автоматически создан декоратор
компонента:
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
Также в этом файле будет автоматически создан класс компонента:
export class UserComponent {
}
Теперь наш дочерний компонент
нужно подключить к родительскому.
Пусть родительским будет компонент app,
изначально присутствующий при установки
фреймворка. Импортируем в него наш
компонент:
import { UserComponent } from './user/user.component';
В декораторе компонента в ключе imports
укажем наш имортированный компонент:
@Component({
selector: 'app-root',
imports: [UserComponent], // тут
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
Теперь мы можем вывести содержимое
дочернего компонента в родительском.
Для этого в файле с темплейтом родителя
нужно написать специальный тег, имя которых задано
в свойстве selector декоратора
@Component потомка.
В нашем случае это тег app-user.
Напишем его в темлейте родителя:
some text
<app-user></app-user>
Сгенерируйте компонент ProductComponent.
Подключите этот компонент
к главному компоненту вашего проекта.
Внесите изменения в темплейт дочернего компонента. Убедитесь, что они применятся в браузере.
Поменяйте CSS стили дочернего компонента. Убедитесь, что они применятся в браузере.
В дочернем компоненте
сделайте свойства name и price.
Выведите их значения в темплейте дочернего
компонента.