Kullanımı: ana makine seçici vs kapsayıcı bölmesi

Question

Gördüğüm gibi, bir bileşenin şekillendirilmesi için <div> kaplarının yerine kullanılabilir. Örnek:

kullanma konteyner

@Component({ 
    template: ` 
     <div class="container"> 
      <h1>Some Title</h1> 
      <p>Some Content</h1> 
     </div> 
    `, 
    styles: [` 
     .container { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

Eğer doğru anlamak :host

@Component({ 
    template: ` 
     <h1>Some Title</h1> 
     <p>Some Content</h1> 
    `, 
    styles: [` 
     :host { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

kullanarak, bu iki aynı sorunları çözmek. Ve hemen hemen her bir bileşende endişelenecek bir tane daha az elemente ve sınıfa sahip olmak güzel.

Sorular: :host bunun için uygun mu? Değilse, bunun anlamı nedir ve her yere konteyner eklemekten başka, bileşeninize stil vermek için en iyi yöntemler nelerdir?

Answer 1

:host, ana makineyi şekillendirmek içindir ve .container, bileşeninizin içinde container sınıfına sahip herhangi bir div stili oluşturmak içindir.

.container div, ana makine öğesi stillenebilirken kapsülleme nedeniyle bileşeninizin dışındaki stil için kullanılamaz.

display özelliğinin başlangıç ​​değerinin inline olduğunu unutmayın, bu nedenle varsayılan olarak bileşeniniz inline öğesi olarak görüntülenir. Belki de bunu istemezsiniz, özellikle if you have a block element inside of it karşı sezgisel görünebilir (izin verilse bile).

Answer 2

:host, sarıcı öğenizi geçerli bileşen için şekillendiriyor (örneğin <app-header> öğesi) ve bildiğim gibi, bu gibi öğelerin stilini oluşturmanın kısa ve rahat bir yoludur. Aynı sorunu çözmezler.

Answer 3

Ben de geçerli cevaplara aşağıdaki gözlemlerini katacak:

sınıf .container

• Sınıfa her zaman arzu durumda senkronize halde tutmak zorunda daha .container kullanırsanız bileşenlerinizi yeniden adlandırın. Büyük uygulamalarda bu, gelişimin ilk aşamalarında sıklıkla gerçekleşir.
• Ayrıca, özellikle iyi CSS hijyen alışkanlıklarınız yoksa, isim çarpışmaları için açılmanıza neden olur.
• Öğe sınıfı özelliğinin üzerine yazılarak, çalışma zamanında yanlışlıkla silinebilir. element.classList.add(); .remove()

kullanın: konak

• yedek size yazarak bir çok ihtiyacı (bazen bileşen isimleri uzun alabilirsiniz)
• Size eleman eklemek hangi dersleri olursa olsun orada . Ayrıca .container sınıfında da önceliğe sahip olması gerektiğine inanıyorum.
• (Yalnızca açısal) Açı, aynı davranışı öykünür, ancak bileşen kapsüllemesini devre dışı bırakırsanız, :host seçicilerin tümü kullanılamaz hale gelir ve bu da .container sınıfının kullanımına yol açabilir.