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

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>

在我的其他服务中，我使用依赖项注入(inject)将日期服务添加到构造函数，我想在用户从日期选择器中选择新日期时更新所选日期的值，但我似乎无法弄清楚如何设置日期组件以向日期选择器提供日期，当日期更改时，我调用 updateDate 函数来更改 dateService 中的日期值，但我无法更新 observable 并且 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>