Пользовательские Угловое 2 директива не работает

Question

Ошибка
ошибки шаблона синтаксического анализа:
Невозможно привязать к «времени дельта», поскольку он не является известным свойством «р».

Решение в документации
Я должен добавить директиву деклараций массива. Я уже это сделал.

Теперь моя архитектура: У меня есть три модуля:

• 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:

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; 
} 

использование в LoginComponent (пример):

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

Answer 1

Вы должны экспортировать TimeDeltaDirective из вашего TimeModule, а затем импортировать 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 
    ] 
})