Her bileşen, bileşenin nasıl kullanıldığını belirleyen bir CSS seçicisi tanımlar:
@Component({
selector: 'profile-photo',
...
})
export class ProfilePhoto { }
Bir Component diğer Component şablonlarında eşleşen bir HTML öğesi oluşturarak kullanırsınız:
@Component({
template: `
<profile-photo />
<button>Upload a new profile photo</button>`,
...,
})
export class UserProfile { }
Angular, derleme zamanında seçicileri statik olarak eşleştirir. DOM’u çalışma zamanında Angular bağlantıları aracılığıyla veya DOM API’leriyle değiştirmek, render edilen Componentleri etkilemez.
Bir öğe yalnızca bir componenet seçiciyle eşleşebilir. Bir öğeye birden fazla componenet seçicisiyle eşleşirse, Angular bir hata bildirir.
Component seçicileri büyük/küçük harfe duyarlıdır.
Seçicilerin Türleri #
Angular, bileşen seçicilerinde temel CSS seçici türlerinin sınırlı bir alt kümesini destekler:
Seçici tipi | Açıklama | Örnekler |
Tip seçici | HTML etiket adlarına veya düğüm adlarına göre öğeleri eşleştirir. | profile-photo |
Öznitelik seçici | ir HTML özniteliğinin varlığına ve isteğe bağlı olarak bu özniteliğin tam değerine dayalı olarak öğeleri eşleştirir | [dropzone] [type="reset"] |
Sınıf seçici | Bir CSS sınıfının varlığına göre öğeleri eşleştirir. | .menu-item |
Angular, öznitelik değerleri için eşittir (=) operatörü ile tam bir öznitelik değerini eşleştirmeyi destekler. Angular diğer öznitelik değeri operatörlerini desteklemez.
Angular component seçicileri, alt bileşen veya çocuk bileşen gibi kombinatörleri desteklemez.
Angular component namespaces alanlarını belirtmeyi desteklemez.
:not pseudo-class #
Angular, :not pseudo-class destekler. Bu pseudo-class diğer seçicilere ekleyebilir ve bir bileşenin seçicisinin eşleşeceği öğeleri daraltabilirsiniz. Örneğin, [dropzone] özniteliği seçicisini tanımlayabilir ve textarea öğelerini eşleştirmeyi engelleyebilirsiniz.
@Component({
selector: '[dropzone]:not(textarea)',
...
})
export class DropZone { }
Angular componenet seçicilerinde başka hiğbir yalancı sınıf veya yalancı öğeyi desteklemez.
Selectors birleştirme #
Birden fazla selector birleştirerek birleştirebilirsiniz. Örneğin, type=”reset” belirten öğelerini eşleştirebilirsiniz.
@Component({
selector: 'button[type="reset"]',
...
})
export class ResetButton { }
Virgülle ayrılmış bir liste ile birden fazla seçici de tanımlayabilirsiniz:
@Component({
selector: 'drop-zone, [dropzone]',
...
})
export class DropZone { }
Angular, listedeki selectorlerin herhangi biriyle eşleşen her öğe için bir bileşen oluşturur.
Selector seçme #
Bileşenlerin büyük çoğunluğu seçici olarak özel bir öğe adı kullanmalıdır. Tüm özel öğe adları, HTML spesifikasyonunda açıklandığı gibi bir kısa çizgi içermelidir. Varsayılan olarak, Angular mevcut herhangi bir bileşenle eşleşmeyen bir özel etiket adıyla karşılaşırsa bir hata bildirir ve yanlış yazılan bileşen adlarından kaynaklanan hataları önler.
Angular şablonlarında yerel özel öğelerin kullanımıyla ilgili ayrıntılar için Gelişmiş bileşen yapılandırması bölümüne bakın.
Selector öneki #
Angular ekibi, projenizin içinde tanımlanan tüm özel bileşenler için kısa, tutarlı bir önek kullanmanızı önerir. Örneğin, Angular ile YouTube’u oluşturmak isteseydiniz, bileşenlerinize yt- öneki ekleyebilirsiniz; yt-menu, yt-player gibi bileşenler. Bu şekilde seçicilerinizi ad alanlandırarak belirli bir bileşenin nereden geldiğini hemen anlaşılır hale getirebilirsiniz. Angular CLI varsayılan olarak app- önekini kullanır.
Angular, kendi çerçeve API’leri için ng seçici öneki kullanır. Kendi özel bileşenleriniz için asla ng‘yi bir seçici öneki olarak kullanmayın.
Bir öznitelik selector ne zaman kullanılır #
Standart bir yerel öğe üzerinde bir bileşen oluşturmak istediğinizde bir öznitelik selector kullanmayı düşünmelisiniz. Örneğin, özel bir <button> bileşeni oluşturmak istiyorsanız, bir öznitelik selector kullanarak standart öğesinden yararlanabilirsiniz:
@Component({
selector: 'button[yt-upload]',
...
})
export class YouTubeUploadButton { }
Bu yaklaşım, bileşenin tüketicilerinin ekstra çalışma olmadan doğrudan tüm öğenin standart API’lerini kullanmasına izin verir. Bu özellikle aria-label gibi ARIA öznitelikleri için değerlidir.
Angular, mevcut bir componentle eşleşmeyen özel niteliklerle karşılaştığında hataları bildirmez. Öznitelik selectors kullanan componentleri kullanırken, tüketiciler bileşeni veya NgModule’ini içe aktarmayı unutabilirler ve bu da bileşenin render edilmemesine neden olabilir. Daha fazla bilgi için Bileşenleri İçe Aktarma ve Kullanma bölümüne bakın.
Öznitelik seçicileri tanımlayan bileşenler küçük harfli, tireli öznitelikler kullanmalıdır. Yukarıda açıklanan aynı öneki önerisini takip edebilirsiniz.