충돌하는 호스트 디렉티브 바인딩

둘 이상의 호스트 디렉티브 선언이 동일한 입력값이나 출력값을 서로 다른 별칭으로 노출하여 Angular가 중복된 호스트 디렉티브 인스턴스를 병합할 수 없습니다.

이 오류는 다이아몬드 합성 패턴에서 발생합니다. 두 디렉티브가 각자의 hostDirectives에 동일한 공유 디렉티브를 선언하지만, 그 바인딩 중 하나를 서로 다른 별칭으로 노출하는 경우입니다.

@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']}], // 서로 다른 별칭!
})
export class DirB {}

@Component({
  selector: 'app-root',
  // NG8024: Shared.value가 DirA를 통해 "aliasA"로, DirB를 통해 "aliasB"로 노출됩니다.
  template: `<div dirA dirB></div>`,
  imports: [DirA, DirB],
})
export class AppComponent {}

오류 디버깅

오류 메시지에는 충돌하는 디렉티브와 입력값 또는 출력값이 표시됩니다. 해당 공유 디렉티브를 포함하는 모든 hostDirectives 선언을 찾아 inputs나 outputs 배열에서 충돌하는 바인딩을 살펴보세요.

오류를 해결하려면 다음 방법 중 하나를 선택하세요.

• 두 곳에서 같은 별칭을 사용하세요. 두 호스트 디렉티브 선언이 같은 공개 이름으로 바인딩을 노출해야 합니다.
• 한쪽 또는 양쪽 선언에서 별칭을 제거하세요. 어느 선언에서도 사용자에게 바인딩을 노출할 필요가 없다면 inputs나 outputs 배열에서 해당 항목을 완전히 빼세요.

Angular가 중복된 호스트 디렉티브를 병합하는 방법과 충돌이 발생하는 조건은 호스트 디렉티브 중복 제거를 참고하세요.