yoklateknik mülakat
GelişimGeçmiş

Frontend Angular Router Forms Mülakat Soruları

75 doğrulanmış Frontend Angular Router Forms mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Angular Router FormsZorluk 2
Angular neden hem RouterModule.forRoot(routes) hem de RouterModule.forChild(routes) sağlıyor?
  • aforRoot standalone component'ler için, forChild ise yalnızca NgModule'ler içindir — bu ayrım, RouterModule'ün her iki API stilinde de gerçekte nasıl çalıştığını yansıtmaz.
  • bİkisi de geriye dönük uyumluluk için tutulan birbirinin takma adıdır
  • cforRoot, kökte Router servisini bir kez sağlar; forChild ise bir feature modülünün route'larını ona ekler.✓
  • dforChild yalnızca lazy loading kullanılırken gereklidir, aksi halde hiçbir etkisi yoktur
Açıklama:forRoot(), Router servisini ve yapılandırmasını sağladığı için kökte bir kez çağrılmalıdır. forChild() ise servisi yeniden sağlamadan mevcut router'a sadece route tanımları ekler, bu da feature modülleri RouterModule import ettiğinde tekrarlanan router örneklerini önler.
Angular Router FormsZorluk 1
<a [routerLink]="['/products', product.id]">{{ product.name }}</a>

routerLink, düz bir href'e kıyasla burada ne yapar?
  • aPratik bir etkisi yoktur; Angular uygulamalarında <a> etiketleri her zaman tam sayfa yenilemesine yol açar
  • bTam sayfa yenilemesi olmadan verilen route'a client-side navigasyon yapar✓
  • cYalnızca <button> elemanları içinde çalışır, <a> etiketlerinde çalışmaz
  • dSayfa yenilemesini önlemek için template'te manuel olarak preventDefault() çağrılmasını gerektirir
Açıklama:routerLink direktifi tıklamayı yakalar, tarayıcının varsayılan tam navigasyonunu engeller ve Angular Router'ının navigasyonu dahili olarak yapmasını, URL'i güncellemesini ve sayfa yenilemesi olmadan eşleşen component'i render etmesini sağlar.
Angular Router FormsZorluk 2
Bir component içinde route.snapshot.paramMap.get('id') ile route.paramMap.subscribe(...) arasındaki fark nedir?
  • aSnapshot param'ları bir kez okur; aynı örnek yeni param'lar için yeniden kullanılırsa observable tekrar emit eder.✓
  • bHiçbir fark yoktur; ikisi de her navigasyonda otomatik olarak güncellenir
  • cObservable olarak paramMap yalnızca query parametreleri için vardır, route parametreleri için değil
  • dSnapshot asenkrondur, paramMap ise senkrondur, bu da snapshot.paramMap.get()'in ilk change detection döngüsünde henüz hazır bir değere sahip olmayabileceği anlamına gelir.
Açıklama:ActivatedRoute.snapshot, o ana ait reaktif olmayan bir okuma sağlar. Angular aynı component örneğini sadece-parametre değişen bir navigasyonda (örn. /products/1'den /products/2'ye) yeniden kullandığında route.snapshot yeni snapshot ile değiştirilir; ancak eski snapshot'tan daha önce okunmuş bir değer bildirim almaz ve kendiliğinden güncellenmez. route.paramMap'e abone olmak ise güncellenmiş param'lar için yeni emisyonlar alır.
Angular Router FormsZorluk 1
this.router.navigate(['/orders', orderId], { queryParams: { tab: 'details' } });

Bu çağrı ne yapar?
  • aYalnızca query param'ları günceller, /orders/:id segmentini yok sayar
  • bqueryParams, bir array path ile birleştirilemediği için derleme zamanı hatası fırlatır
  • cTüm sayfayı yeniden yükler ve ardından /orders'a navigasyon yapar
  • d/orders/<orderId>'e navigasyon yapar ve ?tab=details'i query string olarak ekler✓
Açıklama:Router.navigate(), path'i oluşturmak için bir commands array'i (burada /orders/<orderId>) artı queryParams'in URL'e query string parametreleri olarak eklendiği bir NavigationExtras objesi alır, tam sayfa yenilemesi olmadan.
Angular Router FormsZorluk 2
const routes: Routes = [
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', component: NotFoundComponent }
];

** route'unun amacı nedir?
  • aYalnızca literal olarak iki yıldız içeren URL'lerle eşleşir
  • bDaha önceki route'larla eşleşmeyen URL'ler için wildcard yakala-hepsi görevi görür.✓
  • cYalnızca kök / path'iyle eşleşir, tıpkı boş string path'in yaptığı gibi, bu da onu path: '' ile gereksiz kılar.
  • dDoğru çalışması için array'de her zaman ilk route olmalıdır
Açıklama:**, Angular Router'ın wildcard path'idir; herhangi bir URL ile eşleşir. Route eşleştirme sıraya bağlı olduğundan (ilk eşleşen kazanır), yukarıdaki daha spesifik her route'tan geçemeyen URL'leri yakalaması için en sona konulmalıdır — genelde bir 404/bulunamadı sayfası için kullanılır.
Angular Router FormsZorluk 2
Bir route için component/modülü eagerly import etmek yerine loadComponent (Angular 14+) veya loadChildren kullanmanın temel faydası nedir?
  • aRender hızını artırmak için o route için change detection'ı devre dışı bırakır
  • bComponent başka yerde tanımlansa bile onu her zaman bir <router-outlet> içinde render edilmeye zorlar
  • cComponent'in HTTP isteklerini, bir service worker'ın statik varlıkları önbelleğe alma şekline benzer şekilde, uygulamanın tüm ömrü boyunca otomatik olarak önbelleğe alır.
  • dO route'u ayrı bir lazy chunk'a bölerek başlangıç bundle'ını küçültür; chunk ihtiyaç anında yüklenir veya yapılandırılmış bir preloading stratejisiyle daha önce indirilebilir.✓
Açıklama:loadComponent/loadChildren, genellikle build araçlarının ayrı bir lazy chunk'a dönüştürdüğü dinamik bir import() kullanır ve böylece başlangıç bundle boyutunu azaltır. Varsayılan NoPreloading stratejisinde chunk navigasyon için gerektiğinde çekilir; PreloadAllModules veya özel bir preloading stratejisi uygun loadChildren ve loadComponent chunk'larını arka planda daha önce indirebilir.

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla