定製角2指令不能正常工作

Question

錯誤
模板解析錯誤：
不能綁定到「時間-Δ」，因爲它不是「P」的已知屬性。在文檔

溶液I必須添加指令向聲明陣列。我已經做到了。

現在我的架構： 我有三個模塊：

• 的AppModule（根）
• TimeModule（應該是一個輔助模塊，後來隨着一些指令）
• AuthModule（登錄，註冊組件等）

該AppModule：

@NgModule({ 
    imports: [ 
     TimeModule, 
     BrowserModule, 
     FormsModule, 
     AuthModule, 
     routing, 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ 
     appRoutingProviders 
    ], 
    bootstrap: [AppComponent] 
}) 

AuthModule：

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     authRouting 
    ], 
    declarations: [ 
     AuthComponent, 
     LoginComponent, 
     SignupComponent, 
     LogoutComponent 
    ], 
    providers: [ 
     AuthGuard, 
     AuthService 
    ], 
    bootstrap: [ LoginComponent ] 
}) 

TimeModule：

@NgModule({ 
    declarations: [ 
     ReadableDatePipe, 
     TimeDeltaDirective 
    ] 
}) 

，現在我想用我的TimeDeltaDirective在LoginComponent的景色。 而且我已經嘗試將該指令添加到其他聲明數組中，但這也不起作用。

我很感謝任何支持！由於

TimeDeltaDirective：在LoginComponent（例如）

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 

@Directive({ selector: '[time-delta]' }) 
export class TimeDeltaDirective { 
    constructor(renderer: Renderer, el: ElementRef) { 
     function getTimeDelta(date: Date) { 
      var now = new Date(); 
      return (now.getTime() - date.getTime())/1000; 
     } 

     this.delta = getTimeDelta(new Date(this.date)); 
    } 

    @Input('date') date: string; 
    delta: number; 
} 

用法：

@Component({ 
    selector: 'login', 
    template: ` 
    <p date="2016-09-28 00:00:00" [time-delta]>{{delta}}</p> 
    ` 
}) 

Answer 1

您需要從TimeModule出口TimeDeltaDirective，然後導入TimeModule您AuthModule因爲你LoginComponent是decalred那裏，這就是你想要使用你的指令的地方。這樣，TimeDeltaDirective將可用於LoginComponent以及AuthModule的其他聲明組件。所以，它應該是這樣的：

AuthModule

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     authRouting, 
     TimeModule 
    ], 
    declarations: [ 
     AuthComponent, 
     LoginComponent, 
     SignupComponent, 
     LogoutComponent 
    ], 
    providers: [ 
     AuthGuard, 
     AuthService 
    ], 
    bootstrap: [ LoginComponent ] 
}) 

TimeModule

@NgModule({ 
    declarations: [ 
     ReadableDatePipe, 
     TimeDeltaDirective 
    ], 
    exports: [ 
     TimeDeltaDirective 
    ] 
})