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>

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

1 个答案: