如何避免在子组件中重复使用 EventEmitter 传递 @Output

// FormActionsComponent (事件源)
@Component({
  selector: 'app-form-actions',
  template: `
        <button (click)="handleDiscard()" type="button">Discard</button>
        <button type="submit">Save</button>
    `,
})
export class FormActionsComponent implements OnInit {
  @Output()
  onDiscard = new EventEmitter<void>(); // 定义 EventEmitter

  handleDiscard(): void {
    this.onDiscard.emit(); // 触发事件
  }
}

// FormComponent (事件转发者)
@Component({
  selector: 'app-form',
  template: `
        <form>
            <app-form-actions (onDiscard)="handleDiscard()"></app-form-actions> <!-- 监听子组件事件 -->
        </form>
    `,
})
export class FormComponent implements OnInit {
  @Output()
  onDiscard = new EventEmitter<void>(); // 再次定义 EventEmitter

  handleDiscard(): void {
    this.onDiscard.emit(); // 转发事件
  }
}

// ParentComponent (事件消费者)
@Component({
  selector: 'app-parent',
  templateUrl: `
        <app-form (onDiscard)="handleDiscard()"></app-form> <!-- 监听表单组件事件 -->
    `,
})
export class ParentComponent implements OnInit {
  handleDiscard(): void {
    console.log('Discard action triggered!'); // 处理事件
  }
}

// my-form.service.ts
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) // 在根模块提供服务，使其在整个应用中作为单例
export class MyFormService {
  private readonly _discarded$ = new Subject<void>(); // 私有的 Subject，用于发布事件
  readonly discarded$: Observable<void> = this._discarded$.asObservable(); // 公共的 Observable，供外部订阅

  /**
   * 触发丢弃事件的方法
   */
  discard(): void {
    this._discarded$.next();
  }
}

// FormActionsComponent
import { Component } from '@angular/core';
import { MyFormService } from './my-form.service'; // 导入服务

@Component({
  selector: 'app-form-actions',
  template: `
        <div class="form-actions">
            <button (click)="handleDiscard()" type="button">Discard</button>
            <button type="submit">Save</button>
        </div>
    `,
  styleUrls: []
})
export class FormActionsComponent {
  constructor(private readonly myFormService: MyFormService) { } // 注入服务

  handleDiscard(): void {
    this.myFormService.discard(); // 通过服务触发事件
  }
}

// ParentComponent
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MyFormService } from './my-form.service'; // 导入服务

@Component({
  selector: 'app-parent',
  templateUrl: `
        <app-form></app-form> <!-- FormComponent 不再需要监听 onDiscard -->
    `,
  styleUrls: []
})
export class ParentComponent implements OnDestroy, OnInit {
  private readonly destroy$ = new Subject<void>(); // 用于管理订阅的生命周期

  constructor(private readonly myFormService: MyFormService) { } // 注入服务

  ngOnInit(): void {
    this.myFormService.discarded$.pipe(
      takeUntil(this.destroy$) // 确保组件销毁时自动取消订阅
    ).subscribe(() => {
      console.log('Discard action handled in ParentComponent via service!');
      // 在这里执行丢弃操作
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next(); // 发送信号，取消所有通过 takeUntil 绑定的订阅
    this.destroy$.complete(); // 完成 Subject
  }
}

// FormComponent (现在更简洁)
import { Component, OnInit } from '@angular/core';
// MyFormService 可以在此组件中注入，如果 FormComponent 自身也需要响应或触发丢弃事件

@Component({
  selector: 'app-form',
  template: `
        <form>
            ...
            <app-form-actions></app-form-actions> <!-- 不再需要 (onDiscard) 监听 -->
        </form>
    `,
  styleUrls: []
})
export class FormComponent implements OnInit {
  // 不再需要 @Output() onDiscard = new EventEmitter<void>();
  // 不再需要 handleDiscard(): void { this.onDiscard.emit() }
  // ... 其他表单逻辑
}