angular - 自定义 Angular 2 指令不起作用

Question

错误
模板解析错误:
无法绑定(bind)到“time-delta”，因为它不是“p”的已知属性。

文档中的解决方案
我必须将指令添加到声明数组。我已经这样做了。

现在我的架构:我有三个模块:

• 应用模块(根)
• TimeModule(后面应该是一个带有一些指令的辅助模块)
• AuthModule(登录、注册组件等)

应用模块:

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

授权模块:

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

时间模块:

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

现在我正尝试在 LoginComponent 的 View 中使用我的 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

您需要从 TimeModule 中导出 TimeDeltaDirective，然后在您的 AuthModule 中导入 TimeModule，因为您的 LoginComponent 在那里贴标，这就是您要使用指令的地方。这样，TimeDeltaDirective 将可用于 LoginComponent 以及 AuthModule 的其他已声明组件。所以，它应该是这样的:

授权模块

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

时间模块

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