1

因此，我尝试在我的 Ionic 5 应用程序中的 2 个不同页面中使用 Angular 的 MatDatePicker，并希望它们以不同的 CSS 显示。

这是第一页的屏幕截图，它使用了正确的 CSS。

如果我切换到另一个站点，它仍然使用第一页的 CSS。 第二页显示不正确的屏幕截图。

当我使用 ionic serve 在浏览器中打开应用程序并重新加载页面时，它使用正确的 CSS 并正确显示。问题显然是，我不能只是在移动设备上重新加载页面，因为它是一个应用程序。（+如果有效的话会很不方便）

我导入了 MatDatePicker 2 次（在每个站点的相应模块中）。也许这是个问题？

我的第一页的 HTML 正确显示：

  <mat-form-field [ngClass]="{'dark':dark}">
    <input matInput [matDatepicker]="matDatepicker" [matDatepickerFilter]="dateFilter" [(ngModel)]="datum"
      (dateInput)="onChangeDatum()">
    <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #matDatepicker></mat-datepicker>
  </mat-form-field>

我的第一页的CSS：

mat-form-field {
    width: 0.8em;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0.5em;
    margin-top: 0.25em;
    margin-bottom: 0;
}

::ng-deep .mat-focused .mat-form-field-label {
    display: none !important;
}

::ng-deep.mat-form-field-underline {
    display: none !important;
}

::ng-deep.mat-form-field-ripple {
    display: none !important;
}

::ng-deep .mat-form-field-label {
    display: none !important;
}

mat-datepicker-toggle {
    color: black !important;
}

.dark mat-datepicker-toggle {
    color: white !important;
}

我的第二页的 HTML 显示不正确：

 <mat-form-field [ngClass]="{'dark':dark}">
   <mat-label>Datum ausw&auml;hlen</mat-label>
   <input [ngClass]="dark?'text-light':'text-dark'" matInput [matDatepickerFilter]="dateFilter"
     [matDatepicker]="picker" [(ngModel)]="inputDatum" (dateInput)="onChangeDatum()" disabled>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker disabled="false"></mat-datepicker>
 </mat-form-field>

我的第二页的CSS：

.dark ::ng-deep .mat-focused .mat-form-field-label {
    color: white !important;
}

.dark ::ng-deep.mat-form-field-underline {
    background-color: white !important;
}

::ng-deep.mat-form-field-ripple {
    background-color: white !important;
}

.dark ::ng-deep .mat-form-field-label {
    color: white !important;
}

.dark mat-datepicker-toggle {
    color: white !important;
}

::ng-deep.mat-form-field-underline {
    background-color: black !important;
}

mat-datepicker-toggle {
    color: black !important;
}

如您所见，我在第一页中禁用了 MatDatePicker 的几乎所有内容，但希望它显示在我的第二页中。

我希望你能帮助我，因为这是我的第一个 ionic 应用程序，它应该是我们学校的应用程序，所以老师和其他学生可以在他们的移动设备上看到他们的时间表和其他东西。

链接到完整项目（带有德语函数名称和注释）：https ://github.com/Ponynjaa/KlaTab

4

0 回答 0