定制角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 
    ] 
})