如何在当日申请CSS课程

Question

我正在尝试使用Angular 5制作自己的日历。 它是这样的：

我想在当天应用CSS类，以便使用其他颜色

这是我的组件：

 @Component({
      selector: 'ca-month-header',
      templateUrl: './month-header.component.html',
      styleUrls: ['./month-header.component.css']
    })
    export class MonthHeaderComponent implements OnInit {
      numbers: number[] = [];
      now: Date = new Date();
      currentYear: number;
      currentMonth: number;
      numberOfDaysCurrentMonth: number;
      monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];
    currentMonthName = '';
currentDay: number;
      constructor() { }

      ngOnInit() {
        this.currentYear = this.now.getUTCFullYear();
        this.currentMonth = this.now.getMonth() + 1;
        this.currentMonthName = this.monthNames[this.currentMonth - 1];
        this.numberOfDaysCurrentMonth = this.getDaysInMonth(this.currentYear, this.currentMonth);
        for (let i = 1; i <= this.numberOfDaysCurrentMonth; i++) {
          this.numbers[i - 1] = i;
        }
      }
this.currentDay = this.now.getUTCDate();
      getDaysInMonth(year: number, month: number): number {
          return new Date(year, month, 0).getDate();
      }

    }

以及插入日期的HTML代码的一部分：

  <div class="wrapper clearfix">
          <div class="left">
              <label class="tag">TAG</label>
           </div>
           <div class="right day-number" *ngFor="let number of numbers"> 
              <label class="number-label"><span></span></label> 
          </div>
      </div>

我应该为此编写一个函数吗？

Answer 1

无需编写任何函数，只需在css中编写一个类以突出显示颜色，即可使用组件文件中模板中的该名称获取变量中的当前日期

<div class="right day-number" *ngFor="let number of numbers" [ngClass]="{'dayColor':number==currentDate}"> 
          <label class="number-label"><span></span></label> 
      </div>

在.ts文件中

this.currentDate = new Date().getDate();

在CSS中：

.daycolor{color:red}