Javascript 创建可由多个组件读取和更新的共享日期服务

我有一项服务可以为我提供约会。我创建了一个服务，该服务将使用该日期并对其进行格式化，然后将其提供给使用该日期作为参数来调用其他服务的各种其他组件。用户可以转到这些组件中的任何一个并更改日期

我尝试使用一个Observable，但我无法更新这些值，并且我不熟悉它们在这个场景中的概念和用法

@Component({
  selector: 'date',
  templateUrl: './date.component.html',
  styleUrls: ['./date.component.css']
 })
 export class DateComponent implements OnInit {

  selectedDate: any;
  maxDate: any;

  constructor(private dateService: HeatmapDateService) {
    this.getAsOfDate().subscribe(date => {
      let formatDate = new Date(date);
      this.selectedDate = formatDate.setDate(formatDate.getDate() + 1);
      this.maxDate = this.selectedDate;
    })

  }

  ngOnInit() {

  }

  getAsOfDate(){
    return this.dateService.get()
  }

使用该服务的HTML

      <mat-form-field>
        <input readonly matInput [max]="dateService.maxDate" [matDatepicker]="picker" [(ngModel)]="dateService.selectedDate"
               (ngModelChange)="updateDate($event)">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

---

在我的其他服务中，我使用依赖注入将日期服务添加到构造函数中，当用户从日期选择器中选择新日期时，我想更新所选日期的值，但我似乎不知道如何设置日期组件以向日期选择器提供日期，当日期更改时，我调用updateDate函数更改dateService中日期的值，但我无法更新可观察的，并且ngModel似乎不是这样工作的。

我可以在文档中看到，unput的语法有点不同（）。你试过了吗

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

否，在这种情况下，我将如何使用addEvent来更改服务中的值？这也不起作用，日期选择器需要显示服务也收到的初始值，该值不起作用。您可以在服务中使用一种方法返回初始日期。这有点太广泛，现在无法提供完整的答案，但是，在您的服务中创建一个可观察的属性（或

subject

），并在需要监听更新的地方订阅它。然后，在我们的服务中，当您更新值时，触发主题上的

下一个
，向所有订阅者输出一个新值