Создание общего сервиса дат, который может быть прочитан и обновлен несколькими компонентами

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>

В других моих службах я использую внедрение зависимостей, чтобы добавить службу даты в конструктор, и хочу обновить значение выбранной даты, когда пользователь выбираетновая дата из средства выбора даты, но я не могу понять, как настроить компонент даты, чтобы обеспечить дату для средства выбора даты, и когда дата изменяется, я вызываю функцию updateDate, чтобы изменить значение даты вdateService, но я не могу обновить наблюдаемый, и ngModel, похоже, не работает так.

Answer 1

В документации видно, что синтаксис unput имеет немного другой синтаксис ( Пример ввода и изменения даты DatePicker ). Вы пробовали это?

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