1

我有一个angular组件，它angular-calendar按月显示（2019 年 1 月，2019 年 2 月...）。我正在展示 6 个月，并且还有按钮可以来回navigation移动月份。calendar首先，我创建了一个组件并在那里实现了所有逻辑。但我需要angular-calendar为按钮创建单独的组件和单独的组件navigation。这是stackblitz工作示例：- https://stackblitz.com/edit/ang-cp-7quundm

<!--code for navigation-->
   <div class="display-calendar">
    <button class="btn btn-sm btn-primary" (click)="getNextData()">Click next</button>

    <button class="btn btn-sm btn-primary" (click)="getPreviousData()">Click previous </button>
  </div>
<!--code for calendar months-->
      <div class="row-items"  *ngFor="let month of months">
        <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]="selectedDate"
          (selectedChange)="onSelect($event)"></mat-calendar>
      </div>

TS代码

 ngOnInit() {
      this.getMonths(this.year, this.month);
    }
  //show calendar in months
    getMonths(year:number, month:number) { 
    this.months = [];
      for (let i = 0; i < 6; i++) {
        this.months.push(new Date(year, month++));
      }
    }
  //navigation for next Month
    getNextData() {
     if(this.curMonth+1 > this.month && this.curYear+1 >= this.year){
       this.month++
     }
     this.getMonths(this.year, this.month); 
    }
  //Navigation for previous Months
    getPreviousData(){
     if(this.curMonth-12 < this.month){
       this.month--
     }
     this.getMonths(this.year, this.month);
    }

我正在考虑与服务或输入法有关。但我很困惑。

this.getMonths(this.year, this.month);

此方法需要在导航组件和日历组件中调用

4

1 回答 1

2

想象你有

<navigation-control [calendar]="calendar"></navigation-control>
<multiple-calendar #calendar></multiple-calendar #calendar>

从导航控制中，您可以

@Input() calendar:any
next()
{
   this.calendar.month++;
   //or this.calendar.next()
}
prev()
{
   this.calendar.month--;
   //or this.calendar.prev()

}

这只是一个想法

于 2019-12-02T14:55:45.630 回答