Örnek sorular
Angular Components LifecycleZorluk 1
Bir TypeScript sınıfını Angular component'i olarak işaretleyen decorator hangisidir?
- a
@Component✓ - b
@Directive - c
@Injectable - d
@NgModule
Açıklama:@Component, sınıfı component olarak ele alması için Angular'a gerekli metadata'yı sağlar; buna view (template ya da templateUrl) ve normal template kullanımı için selector dahildir. @Directive component view'ı olmayan bir directive tanımlar, @Injectable DI derlemesine katılır, @NgModule ise bir modül tanımlar.
Angular Components LifecycleZorluk 1
@Component({ selector: 'app-user-card', ... }) içinde selector özelliği neyi kontrol eder?
- aAngular Router'ın bu component'i URL'lerle eşleştirmek için kullandığı routing path'ini
- bComponent'i bir template'e yerleştirmek için kullanılan özel HTML etiketini✓
- cComponent'in
class anahtar kelimesinden sonra yazılan, export edilmiş TypeScript sınıfının adını - dComponent'i bildiren ve export eden
NgModule'ün (ya da standalone bundle'ın) adını
Açıklama:selector, diğer template'lerin component'i örneklemek için kullandığı CSS benzeri bir seçicidir (varsayılan olarak bir element adı), ör. <app-user-card></app-user-card>. Routing'le, sınıf adıyla ya da modül üyeliğiyle ilgisi yoktur.
Angular Components LifecycleZorluk 2
@Component({ selector: 'app-child', template: `{{ name }}` })
class ChildComponent {
@Input() name!: string;
}
Parent template:
<app-child [name]="parentName"></app-child>Burada
name üzerindeki
@Input() neye izin verir?
- a
ChildComponent'in, onu dinleyen herhangi bir parent'a özel bir name event'i emit etmesine - b
ChildComponent'in, parent'ın injector'ünde kayıtlı bir provider'dan name değeri inject etmesine - cParent'ın property binding ile
name'e bir değer bağlamasına✓ - d
name'in hiçbir binding sözdizimine gerek kalmadan otomatik olarak iki yönlü senkron olmasına
Açıklama:@Input(), name'i bağlanabilir bir property olarak sunar. Parent, köşeli parantez property binding'i, [name]="parentName", kullanarak bir değeri tek yönlü olarak parent'tan child'a geçirir.
Angular Components LifecycleZorluk 1
Angular'ın, genelde @Output() ile eşleştirilen, bir component'in özel event emit etmesi için sağladığı sınıf hangisidir?
- a
Subject - b
BehaviorSubject - c
Observable - d
EventEmitter✓
Açıklama:@Output() property'leri geleneksel olarak new EventEmitter<T>() tipinde tanımlanır. Üzerinde .emit(value) çağırmak, bir parent template'in (eventName)="..." ile bağlanabileceği özel event'i tetikler.
Angular Components LifecycleZorluk 2
@Component({ selector: 'app-child', template: `<button (click)="save()">Save</button>` })
class ChildComponent {
@Output() saved = new EventEmitter<string>();
save() { this.saved.emit('done'); }
}
Parent:
<app-child (saved)="onSaved($event)"></app-child>onSaved($event) içinde
$event neyi ifade eder?
- a
saved.emit(...)'e geçirilen değeri — burada 'done' string'ini✓ - bTarayıcının ham click'inden üretilen native DOM
MouseEvent nesnesini - cEvent'i fırlatan tüm
ChildComponent instance'ına bir referansı - dChild elemanı üzerinde bildirilen template reference değişkenini (
#)
Açıklama:Özel bir @Output EventEmitter'ı için $event, tam olarak .emit(...)'e geçirilen değerdir. Yalnızca native DOM event'lerinde (bir HTML elemanı üzerindeki ham (click) gibi) $event tarayıcının Event nesnesi olurdu.
Angular Components LifecycleZorluk 2
Angular component'in data-bound input property'lerini başlattıktan sonra bir kez çalışan ve başlangıç verisini çekmek gibi başlatma mantığı için standart yer olan lifecycle hook'u hangisidir?
- aconstructor
- b
ngOnInit✓ - c
ngAfterViewInit - d
ngOnDestroy
Açıklama:ngOnInit, Angular component'in data-bound input property'lerini başlattıktan sonra bir kez çalışır. Parent tarafından gerçekten bağlanan input'lar bu noktada kullanılabilir; bağlanmamış opsiyonel bir input ise varsayılan değerini koruyabilir veya undefined kalabilir. Constructor daha erken, Angular input binding'lerini uygulamadan önce çalışır.