使模块在 Angular 应用程序中全局可用 [英] Make Module global available in Angular application

问题描述

我有以下模块，我在其他模块上使用了哪些组件:

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；import { ClickOutsideModule } from "ng-click-outside";从 './popup.component' 导入 { PopupComponent};@NgModule({声明: [弹出组件],进口:[通用模块，点击外部模块],出口:[弹出组件],提供者:[]})导出类 PopupModule {}

我有我的 AppModule:

import { NgModule } from '@angular/core';import { AppBrowserModule } from './app-browser.module';import { AppRoutingModule } from './app-routing.module';从 './home/home.module' 导入 { HomeModule };从 './app.component' 导入 { AppComponent };@NgModule({声明: [应用组件],进口:[应用浏览器模块，家庭模块，应用路由模块],出口:[]，引导程序:[ AppComponent ]})导出类 AppModule { }

1. 是否可以在所有应用模块(例如 PopupModule)中使用 ClickOutsideModule，而无需在每个模块中都导入它?

   还是我总是需要在它使用它的每个模块中导入它?

2. AppModule 中的导出有什么用?

解决方案

只需创建一个 SharedModule，将 ClickOutsideModule 添加到 imports 和exports 数组.像这样:

import { NgModule } from '@angular/core';import { ClickOutsideModule } from "ng-click-outside";@NgModule({进口:[单击外部模块，...],出口:[单击外部模块，...],})导出类 SharedModule {}

然后在您想要访问 ClickOutsideModule 模块的任何位置导入 SharedModule.比如说，如果你想在 AppModule 中使用它，你可以这样做:

<预><代码>...从 './shared/shared.module' 导入 { SharedModule };@NgModule({...,进口:[共享模块，...],...})导出类 AppModule { }

您可以对 PopupModule 执行相同的操作:

<预><代码>...从 './shared/shared.module' 导入 { SharedModule };@NgModule({...,进口:[共享模块，...],...})导出类 PopupModule { }

I have the following Module which components I use on other modules:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';  
import { ClickOutsideModule } from "ng-click-outside";

import { PopupComponent} from './popup.component';

@NgModule({  
  declarations: [
    PopupComponent
  ],      
  imports: [
    CommonModule,
    ClickOutsideModule
  ],  
  exports: [
    PopupComponent
  ],
  providers: []
})

export class PopupModule {}

And I have my AppModule:

import { NgModule } from '@angular/core';

import { AppBrowserModule } from './app-browser.module';
import { AppRoutingModule } from './app-routing.module';

import { HomeModule } from './home/home.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppBrowserModule,  
    HomeModule,
    AppRoutingModule
  ],
  exports: [],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

1. Is it possible to have ClickOutsideModule available in all App modules, such as PopupModule, without the need to import it in every module?

   Or do I always need to import it in each module it uses it?

2. What is Exports in AppModule for?

解决方案

Just create a SharedModule, add the ClickOutsideModule to the imports and exports array of it. Something like this:

import { NgModule } from '@angular/core';
import { ClickOutsideModule } from "ng-click-outside";

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

And then import the SharedModule whereever you want to have access to the ClickOutsideModule module. Say for eg, if you want it in the AppModule, here's how you'll do it:

...
import { SharedModule } from './shared/shared.module';

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

export class AppModule { }

You can do the same for PopupModule:

...
import { SharedModule } from './shared/shared.module';

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

export class PopupModule { }

这篇关于使模块在 Angular 应用程序中全局可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！