'mat-datepicker-actions' 不是已知元素 - 需要最佳解决方案答案

【问题标题】：'mat-datepicker-actions' is not a known element - best solution required'mat-datepicker-actions' 不是已知元素 - 需要最佳解决方案
【发布时间】：2021-05-07 16:37:08
【问题描述】：

我已导入 MatDatepickerModule 并获取 mat-datepicker-actions 未知。我猜还有一些其他模块需要导入。这是代码sn-p：

<mat-form-field appearance="fill" class="example-form-field">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="datepicker">
   <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
   <mat-datepicker #datepicker>
     <mat-datepicker-actions>
       <button mat-button matDatepickerCancel>Cancel</button>
       <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
     </mat-datepicker-actions>
   </mat-datepicker>
 </mat-form-field>

注意： 任何人都在 angular-material 库中提供解决方案，而不是第三方（通常大小太大）。我会很感激的。

【问题讨论】：

你想用 @coachcare/datepicker 实现什么，而 angular-material 官方日期选择器上不存在？
angular material 官方文档是用这个@coachcare/datepicker?如果是，请您粘贴链接。谢谢。

标签： angular datepicker angular-material

【解决方案1】：

您需要将MatDatepickerModule 和MatNativeDateModule 导入到您的组件所在的模块中。我在下面使用 Angular 11

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

    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        MatNativeDateModule,
        MatDatepickerModule
        ...

【讨论】：

【解决方案2】：

mat-datepicker-actions 是 Angular Material Docs 的 11.2.13 版本。

我的问题是我使用的是@angular/material: 11.0.0。所以我更新了我的包：npm update @angular/material @angular/cdk，现在一切正常。

【讨论】：

【解决方案3】：

确保导入MatDatepickerModule 和MatMomentDateModule。

import { MatDatepickerModule, MatMomentDateModule } from '@coachcare/datepicker';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule,
    ...
  ],
  ...
})
export class AppModule {}

更新：

coachcare/npm-datepicker 是官方 Material 的一个 Fork Angular v6 的日期选择器，支持时间选择器。日期选择器允许用户通过文本输入或选择日历中的日期。它由几个组件和协同工作的指令。

Angular 本身没有官方的日期和时间选择器，这就是为什么人们会根据官方的选择器创建解决方案，并在此基础上添加新功能。但是，这些分叉并不总是与最新的 angular/angular-material 版本保持同步，因此依赖它们是不明智的。

您可以在此stackoverflow thread 上找到更多详细信息

【讨论】：

这个库@coachcare/datepicker 有更大的尺寸只是为了获得一个功能。
你能在angular-material而不是第三方提供解决方案吗？
解决什么问题，我的帖子回答了您关于如何解决您遇到的mat-datepicker-actions are not known. 错误的问题。如果您还有其他问题，请更新您的帖子或创建一个新问题
@WasiF 这是updated link。 @Benzara Tahar 我认为 OP 没有要求时间选择器，他问为什么 mat-datepicker-actions 未被识别为有效组件，尽管他正确导入了所需的模块。要@WasiF，请尝试ng update @angular/material，它为我解决了问题。我希望它也对你有用。
@WasiF 添加ng update @angular/material 作为专用答案我认为不是一个好主意。它解决了我的问题，但并不一定意味着如果这对你不起作用，你不应该尝试其他方法。此外，让您的项目依赖项保持最新也是长期发展的一部分。如果我的解决方案对您有用，您可以自己添加一个解决方案并将其归功于我，然后将其标记为答案。

【解决方案4】：

不需要第三方库，你可以通过更新@angular/material来修复它。

ng update @angular/material

感谢@msrumon，他找到了这个解决方案。

【讨论】：