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 datepicker 用于表单中的出生日期字段。

实际结果

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

附加信息

我的路由模块

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. 然后，经过对谷歌的一些研究，我发现你必须导入以下内容：

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

...

imports: [
    ...
    MatDatepickerModule,
    MatNativeDateModule
  ],

并将MatDatepickerModule放在提供者中：

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

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

祝大家有个美好的一天！

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-03-03 22:06:39

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-03-03 22:06:39

解决方案1
2 已采纳 2020-03-03 22:06:39