Angular 4 事件發射器不發射

Question

所以我有一個事件發射器工作得很好。 在我的孩子中，我撥打了 function：

(click)="EnterEditMode()

哪個觸發：

EnterEditMode(){ 
    this.enterEdit.emit(null);
  }

在我的父母中，我然后：

  enterEdit(){
    console.log("got some text");
  }  

這完美無缺。 但現在我想在它旁邊添加第二個 output。 所以在孩子身上，我稱：

SaveChanges();

這會觸發 function：

SaveChanges() {
    this.saveChanges.emit(null);
    console.log("save");
  }

當我調用它時，會觸發控制台日志但不會觸發發出。 我的父母有一個 function，因此從未被調用過。

saveChanges() {
    console.log("saving changes");
    this.editing ? this.editing = false : this.editing = true;
  }

我真的看不出我做錯了什么，並試圖解決問題，但我沒有收到任何錯誤，只有控制台日志顯示已調用“SaveChanges()”。 我是否遺漏了有關發射器的信息？

編輯以顯示我的事件發射器

在我的子組件中：

@Output() enterEdit = new EventEmitter<any>();
@Output() saveChanges = new EventEmitter<any>();

同樣， enterEdit 有效但 saveChanges 不...

Answer 1

在我的特殊情況下，我在沒有警告或消息的情況下遇到了這個問題。

我的誤解如下：

<app-child [someObject]="currentObject" (emitEventFunction)="saveChange($event)">

在我的模板標簽中，我放置了發出事件的 function 的名稱emitEventFunction() ，而不是放置我用@Output()裝飾器聲明的 object。 這意味着當我試圖在我的子組件中調用saveChange() function 時調用 function emitEventFunction()時，Angular 實際上正在尋找一個名為 emitEventFunction 的emitEventFunction 。

解決方案自然是找到我聲明為 output 的內容：

@Output() entryChange = new EventEmitter<any>();

並改用它：

<app-child [someObject]="currentObject" (entryChange )="saveChange($event)">

Answer 2

所以這是由於對 Output 發射器如何在 Angular 中工作的根本誤解。

錯誤的假設簡單地觸發發射器會迫使我的 controller 做出反應。

解決方案在我的 html 文件中，我必須將偵聽器添加到一個元素，然后將事件從 html 傳遞到 controller。這會觸發 controller 執行 function 應該執行的操作。

在 my.html 文件中，我需要將 (saveChanges)='saveChanges($event)' 添加到我的自定義組件中。 這行得通。

Answer 3

在我的例子中，只有事件發射器的名稱必須與父子組件 controller 中的名稱相匹配： @Output('emittername') emitter In parent template: (emittername)="handler($event)" 。 靜默編譯錯誤可能是一出戲劇。

Answer 4

檢查清單

檢查是否滿足以下所有條件（示例如下）：

1. EventEmitter是一個@Output 。
2. emit function 是可達的。
3. 您正在調用模板中的 function。

例子

1. EventEmitter是一個@Input ：

@Component({
  selector: `TempratureCalculator`
  // ...
})
export class TempratureCalculator {
  @Input() tempratureChange = new EventEmitter<float>();

  change(t: float) {
    this.tempratureChange.emit(t);
  }
}

@Component({
  // ...
  template: `<TempratureCalculator (tempratureChange)="change(t)"></TempratureCalculator>
`
})
export class AppComponent {
  change(t: float) {}
}

2. 檢查emit是否可達：

// before
this.tempratureChange.emit(/* ... */);

// after
debugger;
this.tempratureChange.emit(/* ... */);

這將在發射前暫停並在瀏覽器中打開調試器。 如果那沒有發生，那么emit調用是不可訪問的。

3. 傳遞 function 而不是調用它：

<!-- Wrong, Doesn't work -->
<TempratureCalculator (tempratureChange)="change"></TempratureCalculator>

<!-- This works -->
<TempratureCalculator (tempratureChange)="change(t)"></TempratureCalculator>

這是一個社區 wiki 答案，請隨意擴展答案