Дъщерни компоненти в 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. Нека го напишем в темплейта на родителя:

някакъв текст
<app-user></app-user>

Генерирайте компонент ProductComponent. Свържете този компонент към главния компонент на вашия проект.

Внесете промени в темплейта на дъщерния компонент. Уверете се, че те са приложени в браузъра.

Променете CSS стиловете на дъщерния компонент. Уверете се, че те са приложени в браузъра.

В дъщерния компонент създайте свойства name и price. Изведете техните стойности в темплейта на дъщерния компонент.