Angular Material 日期选择器的奇怪行为

Question

问题陈述

我已经实现了 Angular Material 日期选择器，但是当我导航到包含它的页面时，它不允许我查看它。相反，它只是出于一些非常奇怪的原因将我重定向回主页，即使这与路由无关！

代码

这是每当我尝试查看它时将我重定向到主页的代码。这不起作用，即使它编译：

 <mat-form-field class="dobContain">
     <input matInput [matDatepicker]="datePicker" class="field" maxlength="30" type="text"
                        placeholder="Date of Birth">
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

这是有效的代码（相同的输入字段但没有日期选择器）：

<mat-form-field class="dobContain">
   <input matInput class="field" maxlength="30" type="text" placeholder="Date of Birth">
</mat-form-field>

代码说明

第一段代码阻止了我查看它的权限。每当我使用那段代码并尝试导航到包含该代码的页面时，它只会将我重定向回主页。奇怪！

第二个代码块工作完美，是相同的代码，但不包括日期选择器。仅此而已。

预期结果

我想对表单中的出生日期字段使用 Angular Material 日期选择器。

实际结果

每当我路由到包含日期选择器代码的页面时，日期选择器（出于某种原因）将我重定向到主页。

附加信息

我的路由模块

const routes: Routes = [
  { path: "home", pathMatch: "full", component: HomeComponent },
  { path: "products", pathMatch: "full", component: ProductsComponent },
  { path: "productX", pathMatch: "full", component: ProductXComponent },
  { path: "account", pathMatch: "full", component: AccountComponent },
  { path: "login", pathMatch: "full", component: AccountLoginComponent },
  { path: "signUp", pathMatch: "full", component: AccountSignUpComponent }, // The component with the datepicker
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled' })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

进口

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent, GoldenCircleComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ProductXComponent } from './productX/productX.component';
import { AccountComponent } from './account/account.component';
import { AccountLoginComponent } from './account-login/account-login.component';
import { AccountSignUpComponent } from './account-sign-up/account-sign-up.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsComponent,
    ProductXComponent,
    GoldenCircleComponent,
    AccountComponent,
    AccountLoginComponent,
    AccountSignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule,
    MatCardModule,
    MatStepperModule,
    MatInputModule,
    MatDatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent],

// Needed for mat dialog module
  exports: [
    GoldenCircleComponent
  ],

  entryComponents: [
    GoldenCircleComponent
  ]
})
export class AppModule { }

我使用日期选择器导航到页面的组件。

<body>
    <h1 class="title">Account</h1>

    <button mat-raised-button id="login" class="accountBtns" routerLink="/login">Login</button>

    <!-- The button that takes me to the datepicker page -->
    <button mat-raised-button class="accountBtns" routerLink="/signUp">Sign Up</button>
</body>

Answer 1

查看我的控制台后，我发现有一条错误消息说：ERROR Error: MatDatepicker: No provider found for DateAdapter. 然后，在对 Google 进行一些研究之后，我发现您必须导入以下内容：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

...

imports: [
    ...
    MatDatepickerModule,
    MatNativeDateModule
  ],

并将 MatDatepickerModule 放入提供商中：

...
 providers: [
    MatDatepickerModule
  ],
...

这解决了我的问题。我被这个问题困扰了 3 天，因为我没有在控制台中查找错误。现在我知道每当遇到困难时都要查看我的控制台。需要养成查看控制台的习惯...

祝大家有个愉快的一天！

Angular Material 日期选择器的奇怪行为

Weird behavior with Angular Material datepicker

html

datepicker

angular-routing

angular-material

angular