無法綁定到“matDatepicker”，因為它不是“輸入”的已知屬性

Question

我將使用材料日期選擇器 controller。 但它顯示一個錯誤。 當然，我在 app.module.ts 文件中添加了 MatDatepickerModule。 讓我在這里向您展示我的代碼的一些部分：

import { MatDatepickerModule } from '@angular/material/datepicker';
...
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ...,
        MatDatepickerModule,
        SharedModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

這是 html 代碼：

<mat-form-field appearance="fill">
              <mat-label>Event start time</mat-label>
              <input matInput [matDatepicker]="picker">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

以下是錯誤日志：

Error: src/app/.../test.component.html:67:31 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

67               <input matInput [matDatepicker]="picker">

我錯過了什么？

Answer 1

您必須在聲明組件的地方導入MatDatepickerModule 。

@NgModule({
    declarations: [
        AppComponent //Date picker is only available in this component
    ],
    imports: [
        ...
        MatDatepickerModule
    ]
})
export class AppModule {}

假設你有hallway.module

@NgModule({
    declarations: [
        HallwayComponent
    ],
    imports: [
        ...
        MatDatepickerModule //Import it here too, to make it available in Hallway component
    ]
})
export class HallwayModule {}

您還可以創建shared.module或material-shared.module並在其中導入材料組件，並在需要時在每個模塊中導入此共享模塊。