导入 angular 组件以在所有模块中可用

Question

我最近开始玩 angular 2，到目前为止我的体验非常棒。我在 ng1 和 React 方面也有一些很好的经验。所以，这更像是一个普遍的问题，也是一个困惑。我很确定这会帮助很多其他人，而且我还没有真正找到任何直接的答案。

所以假设我有这个 module protected.module.ts，我在其中注册了一些组件。因此，为了使用原始指令 ngFor, ngIf，我必须将 CommonModule 导入特定模块，但同时我还必须将其导入主入口模块，即 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 中全局导入某个模块？通过这种方式，我们需要将其导入到不同的地方，这对我来说似乎是一次大修。还是我完全遗漏了一些要点？

提前谢谢你，我真的希望这对我和其他人都有好处。

Answer 1

我想你最好用 shared module

您的其他 modules（根据我的经验，通常 feature modules）都可以导入此 shared module。
如文档中所述，您可以通过使用 SharedModule re-export 公共依赖项来减少重复的导入语句，例如CommonModule、FormsModule

例如，您可以有一个共享模块 re-export BrowserModule、FormsModule 和 HttpModule，如下所示：

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 导出的所有内容 而无需再次显式导入它。

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

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

导入 angular 组件以在所有模块中可用

Importing angular component to be available in all modules

angular2-routing

angular2-modules

angular