Angular Academy · Ders

Host ve Host-Context Biçimlendirmesi

Bileşenin host öğesini biçimlendirin.

Host ve Host-Context Biçimlendirmesi, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Ana Makine Öğesini Biçimlendirme

Bir bileşen, kendi ana makine öğesinin (seçici etiketi) içinde oluşturulur. Özel :host sözde sınıfı, bu öğeyi bileşen CSS'inden biçimlendirmenizi sağlar.

:host Seçicisi

Bileşenin kendi öğesini hedeflemek için :host kullanın; örneğin öğeye görüntüleme biçimi ve boşluk vermek için.

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

:host Neden Gereklidir

:host olmadan ana makine öğesini bileşenin içinden biçimlendiremezsiniz; çünkü kapsamlı seçiciler yalnızca şablonun içindeki öğelerle eşleşir.

Koşullu :host

Ana makine yalnızca belirli bir koşulu karşılayınca biçimlendirmek için :host() seçicisine bir seçici gönderebilirsiniz; örneğin bir sınıfa sahip olma koşulu.

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

Ana Makine Sınıfını Bağlama

Bileşeni kendi durumuna göre biçimlendirmek için :host() seçicisini ana makine sınıfı bağlamasıyla birleştirin.

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

:host-context Seçicisi

:host-context(), ana makinenin kendisinde değil, herhangi bir üst öğedeki koşula göre bileşeni biçimlendirir. Tema uygulamak için idealdir.

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

Tema Örneği

Ağaçta yukarıdaki bir üst öğe dark-theme sınıfına sahipse kural uygulanır ve tek bir üst öğe iç içe bileşenlerin görünümünü değiştirebilir.

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host ve :host-context

:host bileşenin kendi öğesini, :host-context ise üst öğeleri denetler. Kendi durumu için host'u, temalar gibi miras alınan bağlamlar için host-context'i kullanın.

Alt Öğelerle Birleştirme

İç öğeleri üst öğe bağlamına göre biçimlendirmek için :host-context seçicisini alt öğe seçicileriyle zincirleyebilirsiniz.

:host-context(.compact) .title {
  font-size: 12px;
}

Ana Makinenin Varsayılan Görüntüleme Biçimi

Özel öğelerin ana makineleri varsayılan olarak satır içidir. Düzenin öngörülebilir davranması için :host üzerinde display: block ayarlamak yaygın bir ilk kuraldır.

:host {
  display: block;
}

Pratik Kullanımlar

Bir bileşenin dış kutusunu denetlemek, kendi durumuna tepki vermek ve çevresindeki tema sınıflarına uyum sağlamak için ana makine biçimlendirmesini kullanın; böylece stiller kapsüllü ancak esnek kalır.

Hızlı Kontrol

Ana makine biçimlendirmesiyle ilgili anlayışınızı sınayın.

Özet

Bileşenin kendi öğesini ve durumunu biçimlendirmek için :host, tema uygulamak üzere üst öğe sınıflarına tepki vermek için :host-context() kullanın. Ana makinede display: block ayarlamak yararlı bir varsayılandır.

Sıkça Sorulan Sorular

“Host ve Host-Context Biçimlendirmesi” dersi ücretsiz mi?

Evet — “Host ve Host-Context Biçimlendirmesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Host ve Host-Context Biçimlendirmesi” dersinde ne öğreneceğim?

Bileşenin host öğesini biçimlendirin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Host ve Host-Context Biçimlendirmesi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön