Angular, bileşen tabanlı bir çerçevedir. Uygulamanızın her bir parçası, ekranın farklı bölümlerini temsil eden bileşenlerden oluşur. Bu yazıda, bileşenlerin nasıl çalıştığına, nasıl oluşturulduğuna ve birbiriyle nasıl iletişim kurduğuna göz atacağız.
Bileşen (Component) Nedir?
Bileşenler, Angular uygulamalarının temel yapı taşlarıdır. Bir bileşen, uygulamanızın bir parçasını (örneğin bir düğme, bir form, bir menü) temsil eden bir TypeScript sınıfıdır. Bu sınıf, şablon (HTML) ve stil (CSS) ile birlikte çalışarak kullanıcı arayüzünü oluşturur.
Bileşen Oluşturma
Angular CLI, yeni bileşenler oluşturmak için kolay bir yol sunar:
|
1 2 3 |
ng generate component bileşen-adi |
Bu komut, bileşeniniz için gerekli dosyaları otomatik olarak oluşturur: TypeScript (.ts), HTML (.html) ve CSS (.css) dosyaları.
Örnek olarak, bir “user” bileşeni oluşturduğunuzda:
- user.component.ts
- user.component.html
- user.component.css
dosyaları oluşturulur.
Bileşenin Yapısı
Bir bileşenin temel yapısı şu şekildedir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent { // Sınıf özellikleri ve metotları burada tanımlanır } |
selector: Bileşenin HTML’de nasıl kullanılacağını belirtir. Bu örnekte, <app-user></app-user> şeklinde kullanılır.
templateUrl: Bileşenin HTML şablon dosyasını belirtir.
styleUrls: Bileşenin stil dosyalarını belirtir. Birden fazla stil dosyası da belirtilebilir.
Bileşen İlişkileri
Bir Angular uygulaması, genellikle birçok bileşenden oluşur. Bu bileşenler arasında hiyerarşik bir ilişki bulunur. Örneğin, ana bir bileşeninizin içinde başka bileşenler olabilir. Bu alt bileşenler, ana bileşenle veya diğer alt bileşenlerle veri paylaşabilir.
Veri aktarımı, genellikle iki yöntemle gerçekleşir:
- Input: Parent bileşenden child bileşene veri göndermek için kullanılır.
- Output ve EventEmitter: Child bileşenden parent bileşene bir olay veya veri göndermek için kullanılır.
1. Parent’tan Child’a Veri Aktarma (@Input)
Parent bileşeninden child bileşene veri aktarmak için @Input dekoratörü kullanılır.
Örnek:
Parent Bileşen (app-parent.component.ts):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Component({ selector: 'app-parent', template: ` <app-child [childProp]="parentData"></app-child> ` }) export class ParentComponent { parentData = "Veri Parent'tan Child'a"; } |
Child Bileşen (app-child.component.ts):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Component({ selector: 'app-child', template: ` <p>{{ childProp }}</p> ` }) export class ChildComponent { @Input() childProp: string; } |
[childProp]=”parentData” ifadesiyle Parent bileşenindeki parentData değişkeni, Child bileşenindeki childProp özelliğine bağlanır.
2. Child’dan Parent’a Olay Aktarma (@Output ve EventEmitter)
Child bileşeninden Parent bileşene bir olay göndermek için @Output dekoratörü ve EventEmitter kullanılır.
Child Bileşen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <button (click)="sendEvent()">Parent'a Bilgi Gönder</button> ` }) export class ChildComponent { @Output() childEvent = new EventEmitter<string>(); sendEvent() { this.childEvent.emit('Child’dan gelen mesaj!'); } } |
Parent Bileşen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@Component({ selector: 'app-parent', template: ` <app-child (childEvent)="receiveMessage($event)"></app-child> <p>{{ message }}</p> ` }) export class ParentComponent { message: string; receiveMessage($event) { this.message = $event; } } |
Child bileşeninde bir butona tıklandığında sendEvent metodu çalışır ve bir olay yayar. Parent bileşen, bu olayı dinler ve receiveMessage metodu ile gelen veriyi işler.
Son olarak farklı bir konuya daha değinmek istiyorum.
3. Child Bileşeninden Parent’a Metod Çağırma (ViewChild)
Bazen bir Parent bileşenin metodunu doğrudan Child bileşeninden çağırmak isteyebilirsiniz. Bu, ViewChild dekoratörü ile gerçekleştirilir.
Parent Bileşen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', template: ` <app-child></app-child> <button (click)="childComponent.childMethod()">Child Metodunu Çağır</button> ` }) export class ParentComponent { @ViewChild(ChildComponent) childComponent: ChildComponent; } |
Child Bileşen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Component } from '@angular/core'; @Component({ selector: 'app-child', template: `...` }) export class ChildComponent { childMethod() { console.log('Child metod çağrıldı!'); } } |
Parent bileşenindeki butona tıklandığında, doğrudan Child bileşenindeki childMethod çağrılır.
Angular’da bileşenler, uygulamanızın temelini oluşturur. Bileşenlerle çalışırken, onların nasıl birbiriyle etkileşimde bulunduğunu ve nasıl organize edildiğini göz önünde bulundurarak karmaşık uygulamalar geliştirebilirsiniz.
Umarım “Angular Bileşenler (Components) ve Bileşen İlişkileri” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Data Binding: Tek Yönlü ve Çift Yönlü Veri Bağlama
Yeni bir yazımda görüşmek üzere.
Happy coding!
 ve Bileşen İlişkileri){kind=link}