Angular子组件调用父组件方法无报错但返回undefined如何解决

问题根因 #

• 父组件实例获取方式错误
  @ViewChild 是用于查询当前组件模板内部的子组件、DOM元素或指令的API，无法获取当前组件的父组件实例。你添加了可选链?.，所以当profile为undefined时调用方法不会抛出错误，但实际上父组件的dataTest方法根本没有被执行。
• 方法未设置返回值
  JS/TS中没有显式写return语句的函数，执行后默认返回undefined，就算方法正常执行，你拿到的返回值也一定是undefined。
• 变量未初始化赋值
  你声明了user:any但没有给它赋任何初始值，默认值就是undefined，就算方法正常触发，打印的结果也会是undefined。

修复方案 #

推荐使用Angular官方建议的@Output事件机制实现子组件通知父组件执行逻辑，耦合度更低，符合单向数据流规范：

1. 子组件定义抛出事件 #

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: ''
})
export class ChildComponent {
  // 定义通知父组件的事件
  @Output() fetchData = new EventEmitter<void>();

  ngAfterViewInit():void{
    this.fetchData.emit();
  }
}

2. 父组件模板绑定监听事件 #

<!-- 父组件模板中引入子组件的位置绑定事件 -->
<app-child (fetchData)="dataTest()"></app-child>

3. 父组件补充变量赋值和方法返回值 #

// 初始化赋值
user:any = { id: 1, name: '测试用户' }

dataTest(){
  console.log(this.user);
  // 添加返回语句
  return this.user;
}

如果确实需要直接在子组件获取父方法返回值，可以用父组件注入的方式（不推荐，会增加组件耦合度）：

import { Component, Inject, forwardRef } from '@angular/core';
import { AppLayoutComponent } from './app-layout.component';

@Component({
  selector: 'app-child',
  template: ''
})
export class ChildComponent {
  // 注入父组件实例
  constructor(@Inject(forwardRef(() => AppLayoutComponent)) private parent: AppLayoutComponent) {}

  ngAfterViewInit():void{
    const data = this.parent.dataTest();
    console.log('父方法返回值：', data);
  }
}

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