Question

我正在使用指令来获取clickevent。

我的指示是

  import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

 @Directive({
selector: '[clickOutside]'
 })
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {
}

@Output()
public clickOutside = new EventEmitter<MouseEvent>();

@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {

    if (!targetElement) {
        return;
    }

    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
        this.clickOutside.emit(event);
    }
}

}

当我在inventtry.module.ts中使用它（对于发明页面）它工作正常，

在inventtry.module.ts中，我刚刚添加到声明中。

 @NgModule({
imports: [BrowserModule, RouterModule, FormsModule, ToastModule, DropdownModule, DatepickerModule, PaginationModule],
declarations: [ClientPurchaseOrderComponent, ClientPurchaseOrderAddComponent,ClickOutsideDirective ],
exports: [ClientPurchaseOrderComponent, ClientPurchaseOrderAddComponent, RouterModule]
  })

它工作正常，我想要的是如果我需要在每个模块中使用它。所以我正在尝试在app.module.ts我添加了指令，而不是在每个模块中，但它不工作，甚至没有给出任何错误？

  @NgModule({
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes),
    InventoryModule,
    LoginModule,
    SharedModule.forRoot(),
    ToastModule.forRoot(),
    DropdownModule.forRoot(),
    ModalModule.forRoot(),
    PaginationModule.forRoot(),
    DatepickerModule.forRoot()
],
declarations: [AppComponent,ClickOutsideDirective],
providers: [AuthGuard, LoaderService, HttpBaseService, UIService, SettingService],
bootstrap: [AppComponent],
exports:[]

   })

如何在角度为2的情况下全局化指令而不添加每个模块？

Answer 1

默认情况下它无处不在，依赖全球实体反对模块的概念。

这是模块导出的目的地，as explained in the manual。常用项目可以从公共模块重新导出，以便在其他模块中使用：

@NgModule({
  imports: [],
  declarations: [ClickOutsideDirective],
  exports: [ClickOutsideDirective, CommonModule, FormsModule]
})
export class SharedModule { }

所以而不是

@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [ClickOutsideDirective],
  ...
})
export class AppModule { }

它只是

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

Answer 2

这不是模块在Angular中的工作方式。

模块只能看到它自己的声明。

但是Services可以全局使用，而不需要在每个模块中provide。

并且您不能在多个模块中声明指令。否则你会发现这个错误：

BlahComponent / Directive由模块声明。

因此，您可以做的最好的事情是创建单独的模块并从中导出组件，并将该模块导入需要该组件的每个其他模块中。

@NgModule({
  exports :[ClickOutsideDirective]
})
export class ClickOutsideDirectiveModule{
}

然后在你的其他模块中：

 @NgModule({
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes),
    InventoryModule,
  ....
ClickOutsideDirectiveModule

],
declarations: [AppComponent],
providers: [AuthGuard, LoaderService, HttpBaseService, UIService, SettingService],
bootstrap: [AppComponent],
exports:[]

   })

如何在app.module中指定自定义指令到处使用？

2 个答案: