Binding de host directive en conflit

Deux déclarations de host directive ou plus exposent le même input ou output sous des alias différents, ce qui empêche Angular de fusionner les instances de host directive en double.

Cette erreur provient du motif de composition en diamant : deux directives déclarent toutes les deux la même directive partagée dans leurs hostDirectives, mais chacune expose l'un de ses bindings sous un nom d'alias différent.

@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']}], // different alias!
})
export class DirB {}

@Component({
  selector: 'app-root',
  // NG8024: Shared.value is exposed as both "aliasA" (via DirA) and "aliasB" (via DirB).
  template: `<div dirA dirB></div>`,
  imports: [DirA, DirB],
})
export class AppComponent {}

Déboguer l'erreur

Le message d'erreur identifie la directive ainsi que l'input ou l'output en conflit. Trouvez chaque déclaration hostDirectives qui inclut cette directive partagée et inspectez les tableaux inputs ou outputs pour repérer le binding en conflit.

Pour résoudre l'erreur, choisissez l'une des approches suivantes :

• Utilisez le même alias aux deux endroits. Les deux déclarations de host directive doivent exposer le binding sous le même nom public.
• Supprimez l'alias de l'une des déclarations ou des deux. Si aucune des déclarations n'a besoin d'exposer le binding aux consommateurs, omettez-le complètement des tableaux inputs ou outputs.

Consultez Dédoublonnage des host directives pour en savoir plus sur la façon dont Angular fusionne les host directives en double et sur ce qui constitue un conflit.