如何将完整日历日点击日期发送到Angular5中的其他组件

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class CalendarService {
  private selectedDateSource = new Subject<Date>();
  selectedDate$ = this.selectedDateSource.asObservable();

  setSelectedDate(date: Date) {
    this.selectedDateSource.next(date);
  }
}

import { Component } from '@angular/core';
import { CalendarService } from './calendar.service';

@Component({
  selector: 'app-calendar',
  template: `
    <div>
      <!-- 日历的HTML代码 -->
      <div (click)="selectDate(date)" *ngFor="let date of calendarDates">{{ date }}</div>
    </div>
  `,
})
export class CalendarComponent {
  calendarDates: Date[] = []; // 日历日期数组

  constructor(private calendarService: CalendarService) {}

  selectDate(date: Date) {
    this.calendarService.setSelectedDate(date);
  }
}

import { Component, OnInit } from '@angular/core';
import { CalendarService } from './calendar.service';

@Component({
  selector: 'app-other-component',
  template: `
    <div>
      <!-- 其他组件的HTML代码 -->
      <p>选中的日期是: {{ selectedDate }}</p>
    </div>
  `,
})
export class OtherComponent implements OnInit {
  selectedDate: Date;

  constructor(private calendarService: CalendarService) {}

  ngOnInit() {
    this.calendarService.selectedDate$.subscribe(date => {
      this.selectedDate = date;
    });
  }
}