我向我的一個(gè)angular項(xiàng)目頁(yè)面添加了一個(gè)彈出模式，但是在我刷新頁(yè)面之前，該模式的樣式不起作用。您可以在截圖中看到日歷圖標(biāo)對(duì)于每個(gè)日期選擇器來說是如何不合適的。

當(dāng)我刷新頁(yè)面時(shí)，樣式看起來和預(yù)期的一樣。

打字稿:

import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'ds-compare',
  templateUrl: './compare.component.html',
  styleUrls: ['./compare.component.scss']
})
export class CompareComponent implements OnInit {
  dayOne: Date = new Date();
  dayTwo: Date;
  dayThree: Date;
  selectionDayTwo: string;
  selectionDayThree: string;
  isDayTwoDisabled: boolean = false;
  isDayThreeDisabled: boolean = false;

  /*
  @Input() parentData: string;
  @Output() notify: EventEmitter<string> = new EventEmitter<string>();
  */

  constructor(public dialogRef: MatDialogRef<CompareComponent>) { }

  ngOnInit(): void {
    this.retrieveSavedData();
    
    if (!this.selectionDayTwo) {
      this.selectionDayTwo = 'week';
      this.updateDayTwo();
    }
    if (!this.selectionDayThree) {
      this.selectionDayThree = 'none';
      this.updateDayThree();
    }
  }

  updateDayTwo() {
    const currentDate = new Date(this.dayOne);
    this.dayTwo = new Date(currentDate);

    if (this.selectionDayTwo === 'day') {
      this.isDayTwoDisabled = false;
      this.dayTwo = new Date(currentDate);
    } else if (this.selectionDayTwo === 'week') {
      this.dayTwo.setDate(currentDate.getDate() - 7);
      this.isDayTwoDisabled = true;
    } else if (this.selectionDayTwo === 'month') {
      this.dayTwo.setMonth(currentDate.getMonth() - 1);
      this.isDayTwoDisabled = true;
    } else if (this.selectionDayTwo === 'year') {
      this.dayTwo.setFullYear(currentDate.getFullYear() - 1);
      this.isDayTwoDisabled = true;
    }
    this.saveData();
  }
  
  updateDayThree() {
    const currentDate = new Date(this.dayOne);
    this.dayThree = new Date(currentDate);

    if (this.selectionDayThree === 'day') {
      this.isDayThreeDisabled = false;
    } else if (this.selectionDayThree === 'week') {
      this.dayThree.setDate(currentDate.getDate() - 7);
      this.isDayThreeDisabled = true;
    } else if (this.selectionDayThree === 'month') {
      this.dayThree.setMonth(currentDate.getMonth() - 1);
      this.isDayThreeDisabled = true;
    } else if (this.selectionDayThree === 'year') {
      this.dayThree.setFullYear(currentDate.getFullYear() - 1);
      this.isDayThreeDisabled = true;
    }
    else if (this.selectionDayThree === 'none') {
      this.dayThree = null;
      this.isDayThreeDisabled = true;
    }
    this.saveData();
  }

  updateDayTwoDay(event: MatDatepickerInputEvent<Date>) {
    this.dayTwo = event.value;
    this.saveData();
  }

  updateDayThreeDay(event: MatDatepickerInputEvent<Date>) {
    this.dayThree = event.value;
    this.saveData();
  }

  private saveData() {
    const data = {
      dayOne: this.dayOne,
      dayTwo: this.dayTwo,
      dayThree: this.dayThree,
      selectionDayTwo: this.selectionDayTwo,
      selectionDayThree: this.selectionDayThree,
      isDayTwoDisabled: this.isDayTwoDisabled,
      isDayThreeDisabled: this.isDayThreeDisabled
    };

    sessionStorage.setItem('reports-hourly-chart-compare', JSON.stringify(data));
  }

  private retrieveSavedData() {
    const savedData = sessionStorage.getItem('reports-hourly-chart-compare');

    if (savedData) {
      const data = JSON.parse(savedData);

      this.dayOne = data.dayOne;
      this.dayTwo = data.dayTwo;
      this.dayThree = data.dayThree;
      this.selectionDayTwo = data.selectionDayTwo;
      this.selectionDayThree = data.selectionDayThree;
      this.isDayTwoDisabled = data.isDayTwoDisabled;
      this.isDayThreeDisabled = data.isDayThreeDisabled;
    } else {
      this.dayOne = new Date();
    }
  }

  resetForm() {
    this.dayOne = new Date();
    this.selectionDayTwo = "week";
    this.selectionDayThree = "none";
    this.updateDayTwo();
    this.updateDayThree();
    this.saveData();
  }

  submitForm() {
    this.saveData();
    //this.notify.emit('Data from child: submitForm');
    this.dialogRef.close({submit: true, date1: this.dayOne, date2: this.dayTwo, date3: this.dayThree});
  }

  closePopup() {
    this.saveData();
    this.dialogRef.close({submit: false});
  }

}

HTML:

<div class="mainContainer">
    <button class="closeButton" (click)="closePopup()"><span class="material-icons">close</span></button>
    <h3>Compare periods</h3>
    <div>
        <p>Select the periods to compare between the data</p>
    </div>
    <div>
        <div>
            <p>Day 1</p>
            <div class="dateContainer">
                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="picker1" [value]="dayOne" [(ngModel)]="dayOne"
                        (dateChange)="updateDayTwo(); updateDayThree()">
                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>
            </div>
        </div>
        <div>
            <p>Day 2</p>
            <div class="dateContainer">
                <mat-form-field class="dropDown" appearance="outline">
                    <mat-select [(value)]="selectionDayTwo" (selectionChange)="updateDayTwo()" required>
                        <mat-option value="day">Day</mat-option>
                        <mat-option value="week">Week</mat-option>
                        <mat-option value="month">Month</mat-option>
                        <mat-option value="year">Year</mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="picker2" [value]="dayTwo" [disabled]="isDayTwoDisabled" (dateChange)="updateDayTwoDay($event)" required>
                    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                    <mat-datepicker #picker2></mat-datepicker>
                </mat-form-field>
            </div>
        </div>
        <div>
            <p>Day 3</p>
            <div class="dateContainer">
                <mat-form-field class="dropDown" appearance="outline">
                    <mat-select [(value)]="selectionDayThree" (selectionChange)="updateDayThree()">
                        <mat-option value="none">None</mat-option>
                        <mat-option value="day">Day</mat-option>
                        <mat-option value="week">Week</mat-option>
                        <mat-option value="month">Month</mat-option>
                        <mat-option value="year">Year</mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="picker3" [value]="dayThree" [disabled]="isDayThreeDisabled" (dateChange)="updateDayThreeDay($event)">
                    <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                    <mat-datepicker #picker3></mat-datepicker>
                </mat-form-field>
            </div>
        </div>
        <div class="buttonContainer">
            <button class="reset" (click)="resetForm()">Reset</button>
            <button class="apply" (click)="submitForm()">Apply</button>
        </div>
    </div>
</div>

SCSS:

::ng-deep {
  .mainContainer {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #FFFFFF;
  }

  .buttonContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .buttonContainer button {
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .buttonContainer button.reset {
    background-color: white;
    color: black;
  }

  .buttonContainer button.apply {
    background-color: blue;
    color: white;
  }

  .buttonContainer button:hover {
    border-color: blue;
  }

  .closeButton {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .material-icons {
    font-size: 24px;
  }

  h3 {
    margin-top: 0;
  }

  div>p {
    margin: 10px 0;
  }

  .dateContainer {
    display: flex;
  }

  .dropDown {
    width: 30%;
  }
}