Компонентҳои фарзандӣ дар Angular

Чун ки дар ибтидои китоби дарсӣ зикр шуда буд, дар Angular тамоми лоиҳа ба компонентҳо тақсим карда мешавад. Дар дарсҳои гузашта мо танҳо бо компоненти асосӣ, ки ба таври пешфарз сохта шуда буд, кор кардем. Биёед ҳоло сохтани компонентҳои фарзандиро омӯзем.

Коди компонентҳои нав ба таври худкор аз тарафи Angular бо истифода аз фармони махсуси терминал: generate component тавлид карда мешавад. Пас аз калимаи component бояд nomi компоненти нави мо навишта шавад. Фарз кунем мо мехоҳем компоненти 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']
})

Ҳоло мо метавонем мундариҷаи компоненти фарзандро дар волидайн чоп кунем. Барои ин дар файли template-и волидайн бояд теги махсус навишт, номи ки дар хосияти selector декоратори @Component фарзанд муайян карда шудааст. Дар ҳолати мо ин теги app-user аст. Онро дар template-и волидайн менависем:

матоъи қариб
<app-user></app-user>

Компоненти ProductComponent-ро тавлид кунед. Ин компонентро ба компоненти асосии лоиҳаи худ пайваст кунед.

Дар template-и компоненти фарзанд тағирот ворид кунед. Боварӣ ҳосил кунед, ки онҳо дар браузер татбиқ карда мешаванд.

Стилҳои CSS-и компоненти фарзандро иваз кунед. Боварӣ ҳосил кунед, ки онҳо дар браузер татбиқ карда мешаванд.

Дар компоненти фарзанд хосиятҳои name ва price-ро созед. Арзишҳои онҳоро дар template-и компоненти фарзанд чоп кунед.