使模块在Angular应用程序中全局可用 [英] Make Module global available in Angular application
问题描述
我有以下模块,可以在其他模块上使用哪些组件:
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 {}
我有我的AppModule:
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 { }
-
是否可以在所有App模块(例如PopupModule)中使用ClickOutsideModule,而无需在每个模块中导入它?
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?
AppModule中的导出功能是什么?
What is Exports in AppModule for?
推荐答案
只需创建一个SharedModule
,然后将ClickOutsideModule
添加到它的imports
和exports
数组中.像这样:
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 {}
,然后在要访问ClickOutsideModule
模块的任何位置导入SharedModule
.举例来说,如果您希望在AppModule中使用它,请按以下步骤操作:
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 { }
您可以对PopupModule
做同样的事情:
You can do the same for PopupModule
:
...
import { SharedModule } from './shared/shared.module';
@NgModule({
...,
imports: [
SharedModule,
...
],
...
})
export class PopupModule { }
这篇关于使模块在Angular应用程序中全局可用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!