创建一个可以被多个组件读取和更新的共享日期服务

Question

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

我尝试使用 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>

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

Answer 1

我可以在文档中看到 unput 的语法有点不同 (Datepicker input and change events example)。你试过了吗？

<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>