无法绑定到“mdDatepicker”，因为它不是“输入”的已知属性答案

【问题标题】：Can't bind to 'mdDatepicker' since it isn't a known property of 'input'无法绑定到“mdDatepicker”，因为它不是“输入”的已知属性
【发布时间】：2018-02-12 11:09:13
【问题描述】：

我正在尝试使用 Angular Material 设计，但我一直遇到这个错误

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

我正在关注this documentation安装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,
    ) {

    }
}

我被困在这里，我找不到任何解决方案。我找到的唯一解决方案是Can't bind to 'mdDatepicker' since it isn't a known property of 'input' - Angular，但正如您所见，我实现了它，但对我没有帮助。

我猜我正在查看某些东西，还是我错过了一步？

提前致谢

【问题讨论】：

DatePickerComponent 是与上面显示的导入相同的NgModule 的一部分吗？
它是我的shared.module.ts 的组成部分，它是在我的app.module.ts 中导入的。显示的代码来自app.module.ts

标签： angular angular-material2

【解决方案1】：

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

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

在AppModule 中导入它们只会使它们在directives: [...] 或AppModule 中列出的组件中可用，但在其他任何地方都没有。

【讨论】：

啊，我以为app.module.ts 就像一个全球性的东西。你修好了！谢谢。
AppModule 上提供的服务随处可用（全局单例），但需要在每个模块中单独导入指令、组件和管道以使其可用。

【解决方案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 中看到输出。

【讨论】：