Çakışan Host Directive Bağlaması

İki veya daha fazla host directive tanımı aynı input veya output'u farklı takma adlar (alias) altında açığa çıkarıyor ve bu da Angular'ın yinelenen host directive örneklerini birleştirmesini imkansız hale getiriyor.

Bu hata, elmas kompozisyon deseninden (diamond composition pattern) kaynaklanır: iki direktif de kendi hostDirectives tanımlarında aynı paylaşılan direktifi bildirir, ancak her biri direktifin bağlamalarından birini farklı bir takma ad altında açığa çıkarır.

@Directive()
export class Shared {
  readonly value = input('');
}

@Directive({
  selector: '[dirA]',
  hostDirectives: [{directive: Shared, inputs: ['value: aliasA']}],
})
export class DirA {}

@Directive({
  selector: '[dirB]',
  hostDirectives: [{directive: Shared, inputs: ['value: aliasB']}], // farklı takma ad!
})
export class DirB {}

@Component({
  selector: 'app-root',
  // NG8024: Shared.value hem "aliasA" (DirA aracılığıyla) hem de "aliasB" (DirB aracılığıyla) olarak açığa çıkarılıyor.
  template: `<div dirA dirB></div>`,
  imports: [DirA, DirB],
})
export class AppComponent {}

Hatayı ayıklama

Hata mesajı, çakışan direktifi ve input veya output'u tanımlar. O paylaşılan direktifi içeren her hostDirectives tanımını bulun ve çakışan bağlama için inputs veya outputs dizilerini inceleyin.

Hatayı çözmek için aşağıdaki yaklaşımlardan birini seçin:

• Her iki yerde de aynı takma adı kullanın. Her iki host directive tanımı da bağlamayı aynı genel ad altında açığa çıkarmalıdır.
• Tanımlardan birinden veya her ikisinden takma adı kaldırın. Hiçbir tanımın bağlamayı tüketicilere açığa çıkarması gerekmiyorsa, onu inputs veya outputs dizilerinden tamamen çıkarın.

Angular'ın yinelenen host directive'leri nasıl birleştirdiği ve neyin bir çakışma oluşturduğu hakkında daha fazla bilgi için Host directive yinelenenlerinin elenmesi (de-duplication) bölümüne bakın.