Angular 使用“角度”单击按钮时的增量日期

我有一个按钮，我想更改div元素的值，但每次都要通过单击按钮来增加（或减少）日期。 代码如下所示：

<div mat-dialog-title class="section-title container">
  <app-sizer [date]="today" (newDate)="today=$event"></app-sizer>
</div>

在app sizer组件中，我有：

import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
    <div mat-dialog-title class="section-title container">
    <div class="f-desktop-available f-desktop-available-flat">
      <div class="f-desktop-available-inner">
        <div class="f-desktop-available-days">
          <div class="available-pagination">
            <div (click)="decrement()">
              <svg class="available-pagination-arrow">
                <path
                  d="M6.7.5c.2-.3.5-.5 1-.5s.8.2 1.2.5c.5.6.5 1.4 0 2.2L3.5 8 9 13.5c.6.8.6 1.5 0 2.2-.4.3-.8.4-1.3.4-.4 0-.8 0-1-.3L.4 9C0 9 0 8.6 0 8c0-.4 0-.8.4-1L6.7.5z"></path>
              </svg>
            </div>
          </div>

          <div class="available-day">
            <div class="available-day-title">
              <div class="available-day-name" >{{date | date:'EEEE'}}</div>
              <div class="available-day-date">{{date | date:'d MMM'}}</div>
            </div>
            <div class="available-slots">
              <div class="available-empty-slot">
                <div class="available-empty-slot-dash"></div>
              </div>
              <div class="available-slot">
                10:15
              </div>
              <div class="available-slot">
                10:30
              </div>
              <div class="available-slot">
                10:45
              </div>
            </div>
          </div>
          <div class="available-day">
          <div class="available-pagination">
            <div (click)="increment()">
              <svg class="available-pagination-arrow">
                <path
                  d="M2.7.5c-.2-.3-.5-.5-1-.5S1 .2.5.5C-.2 1-.2 2 .5 2.7L5.7 8 .5 13.5c-.7.8-.7 1.5 0 2.2.3.3.7.4 1.2.4.4 0 .8 0 1-.3L9 9c.3-.2.4-.5.4-1 0-.4 0-.8-.4-1L2.7.5z"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="f-desktop-available-header-border"></div>

        <div class="justify-center"><a
          class="f-button-info f-button"
        ><span class="f-button-label">Valider rendez-vous</span></a>
        </div>
      </div>
    </div>
    </div>
  `,
  styleUrls: ['./calendar-dialog.component.scss']
})
export class CalendarWeekViewHeaderComponent {
  @Input()  date: Date;
  @Output() newDate = new EventEmitter();

  decrement() {
    this.date.setDate(this.date.getDate() - 1);
    this.newDate.emit(this.date);
  }
  increment() {
    this.date.setDate(this.date.getDate() + 1);
    console.log('test,', this.date);
    this.newDate.emit(this.date);
  }

}

从'@angular/core'导入{Component，Input，Output，EventEmitter，OnInit}；
@组成部分({
选择器：'appsizer'，
模板：`
{{date}日期：'EEEE'}
{{date}日期：'d MMM'}
10:15
10:30
10:45
你是谁
`,
样式URL:['./日历对话框.component.scss']
})
导出类CalendarWeekViewHeaderComponent{
@输入（）日期：日期；
@Output（）newDate=neweventemitter（）；
减量{
this.date.setDate（this.date.getDate（）-1）；
this.newDate.emit（this.date）；
}
增量（）{
this.date.setDate（this.date.getDate（）+1）；
console.log（'test'，this.date）；
this.newDate.emit（this.date）；
}
}

---

我曾尝试通过增加数字来做同样的事情，它是有效的，但是我的日期有问题。

< P>我建议不要使用单独的事件，考虑使用双向绑定。（）

---

谢谢你的回答，是的，我实际上也尝试过使用双向绑定，但它不适用于日期

@Component（{selector:'app calendar dialog'，templateUrl:'./calendar dialog.Component.html'，styleURL:['./calendar dialog.Component.scss']}）导出类calendar dialogcomponent实现OnInit{today=new Date（）；constructor（）{this.date=new date（）；}public date:date；ngOnInit（）{console.log（'here'，this.date）；}

您正在从父级打印日期，但您今天将日期绑定到子级。好的，我看到了，但是我如何修复它仍然不知道如何删除CalendarDialogComponent中的

today

字段，并提供

date

而不是

today

<div mat-dialog-title class="section-title container">
  <app-sizer [(date)]="today"></app-sizer>
</div>

export class CalendarWeekViewHeaderComponent {
  @Input()  date: Date;
  @Output() dateChange= new EventEmitter(); // the name matters

  decrement() {
    this.date.setDate(this.date.getDate() - 1);
    this.dateChange.emit(this.date);
  }
  increment() {
    this.date.setDate(this.date.getDate() + 1);
    this.dateChange.emit(this.date);
  }
}