無法綁定到'mdDatepicker'，因為它不是'input'的已知屬性

Question

我正在嘗試使用Angular Material設計，但我一直遇到這個錯誤

Can't bind to 'mdDatepicker' since it isn't a known property of 'input'.

我正在按照此文檔安裝MD。

我已將以下內容導入app.module.ts

/* Material Design */
import { MdDatepickerModule, MdNativeDateModule } from "@angular/material";

並將其添加到@NgModule

@NgModule({
    imports:
    [
        ...
        BrowserModule,
        BrowserAnimationsModule,
        HttpModule,
        /* Material Design */
        MdDatepickerModule,
        MdNativeDateModule,
    ],

在我的組件模板中，我只是復制粘貼示例的代碼

<md-form-field>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker></md-datepicker>
</md-form-field>

我在component.ts文件中沒有做任何特殊操作

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { TranslationPipe } from "../../../pipes";

@Component({
    selector: "date-picker",
    templateUrl: "./date-picker.component.html",
    styleUrls: ["./date-picker.component.scss"],
})
export class DatePickerComponent {

    @Input()
    date;

    constructor(
        private translationPipe: TranslationPipe,
    ) {

    }
}

我被困在這里，我找不到任何解決方案。 我找到的唯一解決方案是無法綁定到'mdDatepicker'，因為它不是'input'的已知屬性 - Angular但是你可以看到我實現了它並且它沒有幫助我。

我猜我在看什么，還是我錯過了一步？

提前致謝

Answer 1

指令需要在imports: [...]中列出imports: [...]使用它們的模塊。

@NgModule({
    imports:
    [
      MdDatepickerModule,
      MdNativeDateModule, 
    ]
}
export class SharedModule {

在AppModule導入它們只能使它們在directives: [...]中列出的組件中可用directives: [...] AppModule而不是其他地方。

Answer 2

使用新版本的angular4 datepicker，語法更改為以下代碼：

DatePicker模塊的啟動：

<mat-input-container>
  <input matInput [matDatepicker]="picker" placeholder="Choose A Date:"><br/><br/>
  <mat-datepicker-toggle mdSuffix [for]="picker"></mat-datepicker-toggle>
</mat-input-container>
<mat-datepicker #picker></mat-datepicker>

這對我有用，並且能夠在UI中看到輸出。