不能綁定到「mdDatepicker」，因爲它不是「輸入」

我試圖利用角材質設計的已知屬性，但我一直運行到這個錯誤不能綁定到「mdDatepicker」，因爲它不是「輸入」

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

我已經導入以下爲我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，但正如你所看到的，我實現了它，它並沒有幫助我。

我猜我在找東西，還是我錯過了一步？

預先感謝

來源

2017-09-04 Nicolas

'DatePickerComponent'是否與上面顯示的輸入具有相同的'NgModule'部分？ –

它是我的'shared.module.ts'的組件，它被導入到我的'app.module.ts'中。顯示的代碼來自'app.module.ts' – Nicolas

指令需要在模塊的imports: [...]上市使用它們的地方。

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

在AppModule導入他們只讓他們在的AppModuledirectives: [...]列出的組件可用，但在其他地方。

來源

2017-09-04 08:46:38

啊，我認爲'app.module.ts'就像是一個全局的東西。你修好了！謝謝。 – Nicolas

'AppModule'上提供的服務隨處可用（全局單例），但需要單獨導入每個模塊中的指令，組件和管道以使其可用。 –

隨着angular4日期選擇器的新版本中，語法變更爲下面的代碼：

的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。

來源

2018-02-07 18:35:44 user3777968

不能綁定到「mdDatepicker」，因爲它不是「輸入」

回答

相關問題