在angular中，如何在单击按钮时将id和对象从一个组件传递到另一个组件的函数？

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

@Component({
  selector: 'send-data',
  template: `
    <button (click)="sendData()">发送数据</button>
  `
})
export class SendDataComponent {
  @Output() sendDataEvent = new EventEmitter<{ id: number, object: any }>();

  sendData() {
    const id = 1; // 替换为实际的id
    const object = { name: 'Object' }; // 替换为实际的对象

    this.sendDataEvent.emit({ id, object });
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'receive-data',
  template: `
    <div>
      <p>接收到的数据：</p>
      <p>ID: {{ receivedData.id }}</p>
      <p>对象名称: {{ receivedData.object.name }}</p>
    </div>
  `
})
export class ReceiveDataComponent {
  receivedData: { id: number, object: any };

  receiveData(data: { id: number, object: any }) {
    this.receivedData = data;
  }
}

<send-data (sendDataEvent)="receiveData($event)"></send-data>
<receive-data></receive-data>