Даччыныя кампаненты ў 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. Выведзіце іх значэнні ў тэмплейце даччынага кампанента.