Angular bileşenler oluştururken her bileşen için benzersiz bir bileşen kimliği (ID) oluşturur. Bu, seçiciler, host binding sayısı, sınıf özellik adları, görünüm ve içerik sorguları dahil ancak bunlarla sınırlı olmayan Angular bileşen metadata'sı kullanılarak oluşturulur. İki bileşenin metadata'sı aynı olduğunda (genellikle aynı seçiciyi paylaştıklarında), bir ID oluşturma çakışması meydana gelecektir.
Bileşen kimlikleri Angular içinde dahili olarak kullanılır:
- stil kapsülleme için DOM düğümlerinin ekstra anotasyonları için
- hidrasyon sırasında sunucu tarafı oluşturma sonrası uygulama durumunu geri yüklemek için.
Bileşen kimliği çakışmasının neden olabileceği sorunlardan kaçınmak için, aşağıda açıklandığı şekilde çözülmesi önerilir.
Bileşen kimliği çakışması örneği
@Component({
selector: 'my-component',
template: 'complex-template',
})
class Some {}
@Component({
selector: 'my-component',
template: 'empty-template',
})
class SomeMocked {}Bu iki bileşenin tanımlanması bir ID oluşturma çakışmasını tetikleyecektir ve geliştirme sırasında bir uyarı görüntülenecektir.
Hatayı ayıklama
Uyarı mesajı, kimlikleri çakışan iki bileşenin sınıf adını içerir.
Sorun aşağıdaki çözümlerden biri kullanılarak çözülebilir:
- İki bileşenden birinin seçicisini değiştirin. Örneğin, etkisiz bir sahte seçici olan
:not()ve farklı bir etiket adı kullanarak.
@Component({
selector: 'my-component:not(p)',
template: 'empty-template',
})
class SomeMocked {}- Bileşenlerden birine ekstra bir host özniteliği ekleyin.
@Component({
selector: 'my-component',
template: 'complex-template',
host: {'some-binding': 'some-value'},
})
class Some {}