兩個以上的宿主指令宣告在不同的別名下公開了相同的輸入或輸出，讓 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']}], // 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 {}除錯方式
錯誤訊息會指出衝突的指令以及輸入或輸出。找出包含該共用指令的每個 hostDirectives 宣告，並檢查 inputs 或 outputs 陣列中衝突的繫結。
要解決此錯誤，請挑選以下其中一種方式：
- 在兩處使用相同的別名。兩個宿主指令宣告都必須在相同的公開名稱下公開該繫結。
- 從其中一處或兩處宣告移除別名。如果兩個宣告都不需要把該繫結公開給使用者，就把它從
inputs或outputs陣列中完全省略。
關於 Angular 如何合併重複的宿主指令，以及什麼構成衝突的更多資訊，請見宿主指令去重。