我应该在哪个模块中声明 Angular 指令？

Question

我有一个指令：

@Directive({
    selector: '[ICheck]',
})
export class ICheckDirective {

    @Input()
    ICheck: string;

    constructor(element: ElementRef) {
        var $element: any = $(element.nativeElement);

        $element.iCheck({
            checkboxClass: 'icheckbox_md',
            radioClass: 'iradio_md',
            increaseArea: '20%'
        })
    }

}

我在app.module

中声明的地方

@NgModule({
    declarations: [
        ...
        ICheckDirective,
    ],
    imports: [
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

我的组件 RoleListComponent 在 roles.module

中出现错误

@NgModule({
    imports: [
        RoleListComponent,
        ...
    ],
    declarations: [
        ...
    ]
})
export class RolesModule { }

我收到错误

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ICheck' since it isn't a known property of 'input'. (" ][ICheck] />

我的路由：

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: DashboardComponent
            },
            {
                path: 'users',
                loadChildren: './user/user.module#UserModule'
            },
            {
                path: 'roles',
                loadChildren: './roles/roles.module#RolesModule'
            },
            {
                path: 'portalpageowners',
                loadChildren: './portalpageowner/portalpageowner.module#PortalPageOwnerModule'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule { }

Answer 1

您需要将其添加到要使用它的模块的声明中。在你的情况下进入RoleModule。但是如果你需要将它添加到更多模块中，你需要创建一个SharedModule，从中导出该指令

@NgModule({
   declarations: [ ..., ICheckDirective, ... ],
   exports: [ ..., ICheckDirective, ... ]
})
export class SharedModule { }

并将此模块导入另一个模块。

@NgModule({
   imports: [ ..., SharedModule, ... ]
})
export class RoleModule { }

...

@NgModule({
   imports: [ ..., SharedModule, ... ]
})
export class AnotherModule { }

export 将使该指令对那些导入 SharedModule.

的模块的声明可见

我应该在哪个模块中声明 Angular 指令？

In which module should I declare Angular Directive?

typescript

angular-routing

angular-module

angular