Angular中子组件加载时向父组件传递值的问题求助

我想在子组件加载完成时给父组件传一组数据，但一直没成功，求帮忙看看问题出在哪。

相关代码说明 #

1. 数据类定义 #

// 截图里的数据类大概是这样
export class TransferData {
  deviceId: string;
  deviceName: string;
  onlineStatus: boolean;
}

2. 父组件接收函数（parent.component.ts） #

// 父组件里用来接收子组件数据的函数
receiveChildData(data: TransferData) {
  console.log('子组件传的数据：', data);
  // 后面是处理逻辑
}

3. 子组件代码（child.component.ts） #

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { TransferData } from '../models/transfer-data';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() sendData = new EventEmitter<TransferData>();
  dataToSend: TransferData = {
    deviceId: 'DEV001',
    deviceName: '测试设备',
    onlineStatus: true
  };

  ngOnInit(): void {
    this.sendData.emit(this.dataToSend);
  }
}

补充说明 #

子组件是通过单页应用的路由菜单加载的，路由配置大概是这样：

const routes: Routes = [
  {
    path: 'dashboard',
    component: ParentComponent,
    children: [
      { path: 'device-detail', component: ChildComponent }
    ]
  }
];

问题原因&解决办法 #

1. 为啥你用@Output没效果？
   因为子组件是通过路由加载的，不是直接写在父组件模板里的嵌套组件，这种情况下@Output加事件绑定的方式根本走不通——这个方案只适用于父组件模板里直接写<app-child (sendData)="receiveChildData($event)"></app-child>的场景。

2. 能用的解决方案

   • 路由传参：如果数据是初始化时的固定值，跳转路由的时候把数据塞到queryParams或者state里，父组件用ActivatedRoute监听。
     跳转示例：

     this.router.navigate(['/dashboard/device-detail'], { 
       queryParams: { deviceId: 'DEV001' }, 
       state: { data: this.dataToSend } 
     });
     

     父组件接收：

     // 监听queryParams
     this.route.queryParams.subscribe(params => {
       console.log(params.deviceId);
     });
     // 取state里的数据
     const data = this.router.getCurrentNavigation()?.extras.state?.data;
     if (data) this.receiveChildData(data);
     

   • 共享服务存数据：搞个全局服务，子组件初始化时把数据扔进去，父组件订阅服务里的数据。
     服务代码：

     @Injectable({ providedIn: 'root' })
     export class DataShareService {
       private dataSubject = new BehaviorSubject<TransferData | null>(null);
       data$ = this.dataSubject.asObservable();
     
       sendData(data: TransferData) {
         this.dataSubject.next(data);
       }
     }
     

     子组件调用：this.dataShareService.sendData(this.dataToSend);
     父组件订阅：

     this.dataShareService.data$.subscribe(data => {
       if (data) this.receiveChildData(data);
     });
     

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