导入角度分量以在所有模块中可用 [英] Importing angular component to be available in all modules

问题描述

我最近开始玩angular 2，到目前为止，我的经历很棒.我对ng1和React也有一些很好的经验.因此，这更是一个普遍的问题，也是一个困惑.我很确定这会帮助很多其他人，而且我还没有真正找到任何直接的答案.

I've recently started playing with angular 2 and my experience so far is awesome. I have some good experience with ng1 and React as well. So, this is more of a general question and a confusion as well. I am pretty sure this would help out a lot of other people as well as I haven't really found any direct answer to this.

因此，假设我有这个module protected.module.ts，其中已注册了一些组件.因此，为了使用基本指令ngFor, ngIf，我必须将CommonModule导入到特定模块，但与此同时，我也必须将其导入到主入口模块，即app.module.ts.

So let's say I have this module protected.module.ts where I have some components registered. So, in order to use primitive directives ngFor, ngIf I would have to import CommonModule to the the specific module but along with that I would have to import this to the main entry module i.e. app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule  } from '@angular/common';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProtectedModule } from './protected/protected.module';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    HttpModule,
    AlertModule.forRoot(),
    LayoutModule,
    ProtectedModule,
    UsersModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

protected.module.ts

import { NgModule } from '@angular/core';
import { CommonModule  } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ProtectedRoutingModule } from './protected-routing.module';

@NgModule({
  imports: [ProtectedRoutingModule, CommonModule],
  declarations: [HomeComponent],
  exports: [HomeComponent]
})
export class ProtectedModule { }

那么，如果我们想在最终拥有的所有模块中使用该模块，是否有一种方法可以在app.module中全局地导入某个模块，那是我的困惑.通过这种方式，对我来说似乎是一个大检查，我们需要将其导入到不同的地方.还是我在这里完全遗漏了一点?

So, the confusion I had was if there was a way to just import some module globally in app.module if we wanted to use that module across all the modules that we would eventually have? With this way, it seems like a overhaul to me that we need to import it to different places. Or am I missing some point here completely?

先谢谢您，我真的希望这对我和其他人都是有益的.

Thank you in advance and I really hope this would be beneficial for me and to other folks as well.

推荐答案

我认为最好使用共享模块

您的其他modules(以我的经验通常为feature modules)都可以导入此shared module.
如文档中所述，您可以通过使SharedModule重新导出公共依赖项来减少重复的导入语句，例如CommonModule，FormsModule

Your other modules (typically feature modules in my experience) can all import this shared module.
As described in the documentation, you can reduce the repeated import statements by having the SharedModule re-export common dependencies e.g. CommonModule, FormsModule

例如，您可以有一个共享模块，只需重新导出BrowserModule，FormsModule和HttpModule，如下所示:

As an example, you can have a shared module just re-export BrowserModule, FormsModule and HttpModule like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

@NgModule({
    exports: [BrowserModule, FormsModule, HttpModule]
})
export class SharedModule { }

然后在其他模块中，无需导入相同的模块，只需导入SharedModule，如下所示.导入SharedModule的每个模块将能够使用SharedModule导出的所有内容导出的，而无需再次明确地导入它.

And then in your other modules, instead of importing those same modules, just import the SharedModule like below. Every module that imports the SharedModule will be able to use everything exported from the SharedModule without explicitly importing it again.

import { NgModule } from '@angular/core';
import { SharedModule } from './path_to_shared_module/shared.module';
...

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

这篇关于导入角度分量以在所有模块中可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！