Angular 2+中使用@Output装饰器实现父子组件通信失败

Hey Diego, let's walk through the most common pitfalls that cause @Output to fail silently (no errors, but no communication either)—I’ve hit almost all of these myself!

1. You Forgot to Bind the Output Event in the Parent Template #

This is the #1 mistake. Even if your child component has a perfectly set up @Output, the parent won’t listen unless you explicitly bind the event in its template.

Child Component Example:

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="triggerParentUpdate()">Send Data</button>`
})
export class ChildComponent {
  // Define the output with an EventEmitter
  @Output() dataUpdated = new EventEmitter<string>();

  triggerParentUpdate() {
    // Emit data to the parent
    this.dataUpdated.emit('New data from child!');
  }
}

Parent Component Fix:
Make sure you bind the dataUpdated event to a parent method in your parent’s template:

<!-- parent.component.html -->
<!-- Bind the child's output event to a parent method -->
<app-child (dataUpdated)="handleChildUpdate($event)"></app-child>

Then add the handler in the parent’s TypeScript:

// parent.component.ts
handleChildUpdate(receivedData: string) {
  console.log('Got data from child:', receivedData);
  // Do something with the data here
}

2. The EventEmitter Isn’t Properly Instantiated #

If you declare an @Output but don’t create a new EventEmitter instance, it won’t emit anything—no errors, just silence.

❌ Wrong:

@Output() dataUpdated; // No EventEmitter instance!

✅ Correct:

@Output() dataUpdated = new EventEmitter<string>();

3. The Emit Trigger Isn’t Firing #

Double-check that the code calling emit() is actually executing. Common issues here:

• A button click event is misspelled (e.g., (clik) instead of (click)).
• The emit is inside an async operation (like an API call) that fails or never completes.
• A conditional statement is blocking the emit (e.g., if (false) { this.dataUpdated.emit(...) }).

4. Typos in the Output Name #

Even a tiny spelling mistake will break the binding. For example:

• Child has @Output() dataUpdated but parent binds (dataUpdate) (missing the 'd').
• Angular supports both camelCase and kebab-case in templates, but they need to match:
  • Child: dataUpdated → Parent can use (dataUpdated) or (data-updated)
  • Child: data_updated → Parent must use (data_updated)

5. The Child Component Isn’t Rendered #

If your child component is wrapped in an *ngIf that evaluates to false, or an *ngFor that has no items, the component won’t exist to emit events. Check your parent template for conditions that might hide the child:

❌ Hidden Child:

<app-child *ngIf="showChild === false" (dataUpdated)="handleChildUpdate($event)"></app-child>

✅ Visible Child:

<app-child *ngIf="showChild === true" (dataUpdated)="handleChildUpdate($event)"></app-child>

Quick Checklist to Debug #

1. Confirm the child component is rendering in the parent (check the DOM with browser dev tools).
2. Verify the @Output is instantiated with new EventEmitter().
3. Check the parent template has the correct event binding.
4. Add a console.log() inside the child’s emit-triggering method to ensure it runs.
5. Check for typos in output names or method names.

Start with these steps, and you’ll almost certainly find the issue!

内容的提问来源于stack exchange，提问作者Diego Alves