Angular组件通信：使用服务避免重复EventEmitter

// form.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
import { FormGroup } from '@angular/forms'; // 假设有这个导入

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="nametagForm" (ngSubmit)="handleSubmit()">
      <!-- ... 其他表单元素 ... -->
      <app-form-actions (onDiscard)="handleDiscard()"></app-form-actions>
    </form>
  `,
  styleUrls: []
})
export class FormComponent {
  nametagForm: FormGroup; // 假设已初始化

  @Output()
  onDiscard = new EventEmitter<void>(); // 转发给更上层组件

  handleDiscard(): void { 
    console.log('FormComponent: Discard event received and re-emitted.');
    this.onDiscard.emit(); 
  }

  handleSubmit(): void { /* ... */ }
}

// form-actions.component.ts
import { Component, EventEmitter, Output, OnInit } from '@angular/core';
import { FormGroup, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'app-form-actions',
  template: `
    <div class="form-actions">
      <button (click)="handleDiscard()" type="button">Discard</button>
      <button [disabled]="formControl.invalid" type="submit">Save</button>
    </div>
  `,
  styleUrls: []
})
export class FormActionsComponent implements OnInit {
  private formControl: FormGroup;

  @Output()
  onDiscard = new EventEmitter<void>(); // 子组件内部事件

  constructor(private readonly rootFormGroup: FormGroupDirective) { }

  ngOnInit(): void {
    this.formControl = this.rootFormGroup.control;
  }

  handleDiscard(): void { 
    console.log('FormActionsComponent: Discard event emitted.');
    this.onDiscard.emit(); 
  }
}

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-form (onDiscard)="handleDiscardFromForm()"></app-form>
  `,
  styleUrls: []
})
export class ParentComponent {    
  handleDiscardFromForm(): void { 
    console.log('ParentComponent: Discard event received.');
    // 执行相关操作
  }
}

// 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事件发生时调用此方法
   */
  discard(): void {
    this._discarded$.next(); // 发射事件
  }  
}

// form-actions.component.ts (修改后)
import { Component, OnInit } from '@angular/core'; // 移除EventEmitter和Output
import { FormGroup, FormGroupDirective } from '@angular/forms';
import { MyFormService } from './my-form.service'; // 导入服务

@Component({
  selector: 'app-form-actions',
  template: `
    <div class="form-actions">
      <button (click)="handleDiscard()" type="button">Discard</button>
      <button [disabled]="formControl.invalid" type="submit">Save</button>
    </div>
  `,
  styleUrls: []
})
export class FormActionsComponent implements OnInit {
  private formControl: FormGroup;

  // 不再需要 @Output() onDiscard = new EventEmitter<void>();

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

  ngOnInit(): void {
    this.formControl = this.rootFormGroup.control;
  }

  handleDiscard(): void { 
    console.log('FormActionsComponent: Calling service to discard.');
    this.myFormService.discard(); // 调用服务方法触发事件
  }
}

// parent.component.ts (修改后)
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',
  template: `
    <app-form></app-form> <!-- 不再需要 (onDiscard) 事件绑定 -->
  `,
  styleUrls: []
})
export class ParentComponent implements OnDestroy, OnInit {    
  private readonly destroy$ = new Subject<void>(); // 用于管理订阅的生命周期

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

  ngOnInit(): void {
    // 订阅服务的discarded$ Observable
    this.myFormService.discarded$.pipe(
      takeUntil(this.destroy$) // 在组件销毁时自动取消订阅
    ).subscribe(() => {
       console.log('ParentComponent: Discard event received via service.');
       // 执行相关操作
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next(); // 发射值，通知所有使用takeUntil的订阅取消
    this.destroy$.complete(); // 完成Subject
  }
}

// form.component.ts (修改后)
import { Component, OnDestroy, OnInit } from '@angular/core'; // 移除EventEmitter和Output
import { FormGroup } from '@angular/forms';
import { MyFormService } from './my-form.service'; // 导入服务
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="nametagForm" (ngSubmit)="handleSubmit()">
      <!-- ... 其他表单元素 ... -->
      <app-form-actions></app-form-actions> <!-- 不再需要 (onDiscard) 事件绑定 -->
    </form>
  `,
  styleUrls: []
})
export class FormComponent implements OnDestroy, OnInit {
  nametagForm: FormGroup; // 假设已初始化
  private readonly destroy$ = new Subject<void>();

  // 不再需要 @Output() onDiscard = new EventEmitter<void>();
  // 不再需要 handleDiscard() 方法

  constructor(private readonly myFormService: MyFormService) {}

  ngOnInit(): void {
    // 如果FormComponent也需要响应这个事件，可以同样订阅
    this.myFormService.discarded$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(() => {
      console.log('FormComponent: Discard event received via service.');
      // 可以在这里执行FormComponent特有的处理逻辑
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  handleSubmit(): void { /* ... */ }
}