Bileşen seçicileri

Her bileşen, bileşenin nasıl kullanılacağını belirleyen bir CSS seçici tanımlar:

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Diğer bileşenlerin şablonlarında eşleşen bir HTML elemanı oluşturarak bileşeni kullanırsınız:

@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

Angular, seçicileri derleme zamanında statik olarak eşleştirir. DOM'u çalışma zamanında, Angular bağlamaları veya DOM API'leri aracılığıyla değiştirmek, render edilen bileşenleri etkilemez.

Bir eleman tam olarak bir bileşen seçicisiyle eşleşebilir. Birden fazla bileşen seçicisi tek bir elemanla eşleşirse, Angular bir hata bildirir.

Bileşen seçicileri büyük-küçük harf duyarlıdır.

Seçici türleri

Angular, bileşen seçicilerinde temel CSS seçici türlerinin sınırlı bir alt kümesini destekler:

Nitelik değerleri için Angular, eşittir (=) operatörü ile tam nitelik değeri eşleştirmeyi destekler. Angular diğer nitelik değeri operatörlerini desteklemez.

Angular bileşen seçicileri, nesil birleştirici veya alt birleştirici dahil olmak üzere birleştiricileri desteklemez.

Angular bileşen seçicileri ad alanlarının belirtilmesini desteklemez.

:not sahte sınıfı

Angular :not sahte sınıfını destekler. Bir bileşenin seçicisinin hangi elemanlarla eşleşeceğini daraltmak için bu sahte sınıfı herhangi bir başka seçiciye ekleyebilirsiniz. Örneğin, bir [dropzone] nitelik seçicisi tanımlayabilir ve textarea elemanlarının eşleşmesini önleyebilirsiniz:

@Component({
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }

Angular, bileşen seçicilerinde başka hiçbir sahte sınıf veya sahte eleman desteklemez.

Seçicileri birleştirme

Birden fazla seçiciyi birleştirerek birleştirebilirsiniz. Örneğin, type="reset" belirten <button> elemanlarını eşleştirebilirsiniz:

@Component({
  selector: 'button[type="reset"]',
  ...
})
export class ResetButton { }

Ayrıca virgüle ayrılmış bir liste ile birden fazla seçici tanımlayabilirsiniz:

@Component({
  selector: 'drop-zone, [dropzone]',
  ...
})
export class DropZone { }

Angular, listedeki seçicilerden herhangi biriyle eşleşen her eleman için bir bileşen oluşturur.

Seçici seçme

Bileşenlerin büyük çoğunluğu, seçicileri olarak özel bir eleman adı kullanmalıdır. Tüm özel eleman adları, HTML spesifikasyonu tarafından açıklandığı gibi bir tire içermelidir. Varsayılan olarak Angular, mevcut hiçbir bileşen ile eşleşmeyen özel bir etiket adıyla karşılaştığında hata bildirir ve yanlış yazılmış bileşen adlarından kaynaklanan hataları önler.

Yerel özel elemanları Angular şablonlarında kullanma hakkında ayrıntılar için Gelişmiş bileşen yapılandırması belgesine bakın.

Seçici önekleri

Angular ekibi, projenizde tanımlanan tüm özel bileşenlerin kısa ve tutarlı bir önek kullanmasını önerir. Örneğin, YouTube'u Angular ile yapacak olsanız, bileşenlerinizi yt- öneki ile adlandırır, yt-menu, yt-player gibi bileşenler oluştururdunuz. Seçicilerinizi bu şekilde ad alanı altında toplamak, belirli bir bileşenin nereden geldiğini hemen anlaşılır kılar. Varsayılan olarak Angular CLI app- önekini kullanır.

Nitelik seçici ne zaman kullanılır

Standart bir yerel eleman üzerinde bileşen oluşturmak istediğinizde nitelik seçici kullanmayı düşünmelisiniz. Örneğin, özel bir buton bileşeni oluşturmak istiyorsanız, nitelik seçicisi kullanarak standart <button> elemanının avantajlarından yararlanabilirsiniz:

@Component({
  selector: 'button[yt-upload]',
   ...
})
export class YouTubeUploadButton { }

Bu yaklaşım, bileşenin tüketicilerinin ek çaba harcamadan elemanın tüm standart API'lerini doğrudan kullanmalarına olanak tanır. Bu özellikle aria-label gibi ARIA nitelikleri için değerlidir.

Angular, mevcut bir bileşenle eşleşmeyen özel niteliklerle karşılaştığında hata bildirmez. Nitelik seçicileri kullanan bileşenlerde, tüketiciler bileşeni veya NgModule'unu içerir (import) etmeyi unutabilir ve bileşen render edilmeyebilir. Daha fazla bilgi için Bileşenleri içeri aktarma ve kullanma belgesine bakın.

Nitelik seçicileri tanımlayan bileşenler küçük harf, tire ile ayrılmış nitelikler kullanmalıdır. Yukarıda açıklanan aynı önek önerilerini takip edebilirsiniz.