Angular子组件EventEmitter发射事件无法触发父组件回调问题求助

• 组件实例不匹配：你在nav.component.html里硬编码的<app-landing-form>和用户实际操作的表单组件不是同一个实例。从路由配置来看，/search路径对应渲染的SearchComponent是在根组件的<router-outlet>里加载的，和nav组件内写的组件完全独立，所以实际被操作的组件emit的事件，nav里的接收方法无法响应。
• keyup事件绑定不可靠：将keyup事件绑定在自定义组件<app-form-field>上，需要依赖该组件内部透传原生keyup事件才能触发，且keyup无法覆盖所有表单值变更场景，比如右键粘贴、自动填充、选择下拉选项等操作都不会触发keyup。
• 逻辑不符合需求：你的目标是点击导航头部时判断是否有输入再触发弹窗，实时传递表单值属于不必要的冗余逻辑。

因为nav组件和路由加载的搜索表单组件是平级关系，通过全局共享服务存储表单输入状态是最稳定的实现方式。

步骤1：创建共享状态服务 #

// search-state.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SearchStateService {
  // 存储表单是否有非空输入的状态
  private hasInputSub = new BehaviorSubject<boolean>(false);
  public hasInput$ = this.hasInputSub.asObservable();

  updateInputStatus(status: boolean): void {
    this.hasInputSub.next(status);
  }
}

步骤2：搜索表单组件监听值变化更新状态 #

修改search.component.ts：

import { Subscription } from 'rxjs';
import { SearchStateService } from '路径/search-state.service';

export class SearchComponent implements OnInit, OnDestroy {
  private valueChangeSub?: Subscription;

  constructor(
    private formService:FormService,
    private searchStateService: SearchStateService
  ) {}

  ngOnInit() {
    this.form = this.formService.toFormGroup(this.searchFields as FormBase<string>[]);
    // 监听表单所有字段值变化
    this.valueChangeSub = this.form.valueChanges.subscribe(formVal => {
      // 判断是否存在非空输入，可根据业务调整判断规则
      const hasInput = Object.values(formVal).some(val => val !== null && val !== undefined && String(val).trim() !== '');
      this.searchStateService.updateInputStatus(hasInput);
    });
  }

  ngOnDestroy(): void {
    // 销毁时取消订阅避免内存泄漏
    this.valueChangeSub?.unsubscribe();
    // 离开页面时重置状态
    this.searchStateService.updateInputStatus(false);
  }

  // 可删除原来的sendToParent方法和outputToParent定义
}

删除search.component.html中<app-form-field>上绑定的(keyup)事件。

步骤3：导航组件订阅状态，点击时判断是否弹出弹窗 #

修改nav.component.ts：

import { Subscription } from 'rxjs';
import { SearchStateService } from '路径/search-state.service';

export class NavComponent implements OnInit, OnDestroy {
  private hasInput = false;
  private stateSub?: Subscription;

  constructor(
    private router:Router,
    public matDialog: MatDialog,
    private searchStateService: SearchStateService
  ) {}

  ngOnInit():void {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    // 订阅表单输入状态
    this.stateSub = this.searchStateService.hasInput$.subscribe(status => {
      this.hasInput = status;
    });
  }

  openLogoutModal() {
    // 无输入时直接跳转，不弹窗
    if (!this.hasInput) {
      this.router.navigateByUrl('/search');
      return;
    }
    // 有输入时弹出确认弹窗
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.id = 'modal-component';
    dialogConfig.data = {
      name: 'Ok',
      title: '是否要刷新页面？已输入的搜索条件和查询结果将会丢失',
      actionButtonText: '确认'
    };
    const modalDialog = this.matDialog.open(ModalComponent, dialogConfig);
    // 用户点击确认后再执行跳转
    modalDialog.afterClosed().subscribe(confirm => {
      if (confirm) {
        this.router.navigateByUrl('/search');
      }
    });
  }

  ngOnDestroy(): void {
    this.stateSub?.unsubscribe();
  }

  // 可删除原来的GetOutputVal方法
}

步骤4：删除冗余代码 #

删除nav.component.html末尾的<app-landing-form (outputToParent)="GetOutputVal($event)"></app-landing-form>代码，避免加载重复的表单组件。

如果确认nav.component.html里的<app-landing-form>就是用户实际操作的表单，只需要将keyup事件监听替换为表单自带的valueChanges监听即可，不需要修改组件层级：

1. 删除search.component.html中<app-form-field>上的(keyup)绑定
2. 在search.component.ts的ngOnInit方法中添加表单值变化监听：

ngOnInit() {
  this.form = this.formService.toFormGroup(this.searchFields as FormBase<string>[]);
  this.form.valueChanges.subscribe(val => {
    this.sendToParent(val);
  });
}

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