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

Question

我最近开始玩角度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

我认为你最好用 共享模块服务

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

举个例子,你可以有一个共享的模块只需重新出口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 { }