如何通過在app.module中指定它來使用自定義指令？

我正在使用指令來獲取clickevent。如何通過在app.module中指定它來使用自定義指令？

我的指令是

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

}

，當我在裏面inventry.module.ts使用它（對於inventry頁）它工作正常，

在inventry.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中的指令而不添加每個模塊？

來源

2017-06-02 hilda_sonica_vish

這不會是隨處可通過默認情況下，依靠全球實體反對模塊的概念。

這是模塊出口的用途，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 { }

來源

2017-06-02 11:27:40 estus

我可以添加一個sahredmodule，並聲明：[ClickOutsideDirective]，這應該在每個模塊，我想使用？ –

並輸出：[ClickOutsideDirective]'。是的，只要您在這些模塊中導入SharedModule即可。 – estus

無法從SharedModule導出指令ClickOutsideDirective，因爲它既沒有聲明也沒有導入！得到這個錯誤 –

這不是模塊在Angular中的工作方式。

一個模塊只能看到它自己的聲明。

但Services可以全局使用，無需在每個模塊中使用provide。

而且您不能在多個模塊中聲明指令。否則你會發現這個錯誤：

BlahComponent/Directive由tho模塊聲明。

因此，您可以做的最好的事情是創建單獨的模塊並從中導出組件，並將該模塊導入需要該組件的每個其他模塊中。

@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:[] 

    })

來源

2017-06-02 11:02:50 Milad

我創建的指令只有一次，但沒有使用它在發明頁面，我必須把這個指令名裏面inventry.module.ts 如果我想在不同的頁面使用相同的指令我不需要創建指令，我有去那個模塊，並把它們的指令名稱也。而不是把這個名字放在每個我可以放在1個地方（app.module）的地方並使用它？ –

看到這行，聲明：[AppComponent，ClickOutsideDirective]，目前我需要在everysingle模塊中做到這一點，使所有頁面中的指令。我不想這樣做 –

夥計，我說你甚至不能這樣做，除非他們的模塊並沒有互相使用。並且沒有其他方式 – Milad

如何通過在app.module中指定它來使用自定義指令？

回答

相關問題