在Angular 2中仅导入模块一次

时间:2016-12-06 06:21:45

标签: angular angular2-forms angular2-services

角度2相当新,还在学习。 据我所知,在Angular 2中使用模块并在应用程序中导入它们是与他们的孩子共享。在下面的代码中,我试图在应用程序范围内共享ReactiveFormsModule,但应用程序在编译时崩溃。 我使用forRoot方法为我的自定义模块完成了这个,但是我无法理解如何使用内置的ngModule来完成它。

app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from "./app-routing.module"
import { AppComponent } from './app.component';

import { HomeModule } from "./home/home.module";
import { AuthenticationModule } from "./authentication/authentication.module";
import { APIServiceModule } from './services/api-service.module';


@NgModule({
  imports: [HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    AuthenticationModule,
    HomeModule,
    APIServiceModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

authentication.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';

import { AuthenticationComponent } from "./authentication.component";
import { AuthenticationRoutingModule } from "./authentication-routing.module"
@NgModule({
    imports: [AuthenticationRoutingModule, BrowserModule],
    declarations: [AuthenticationComponent]
})
export class AuthenticationModule { }
AuthenticationModule中导入

AppModule我希望在模块之间共享Reactive表单模块。但它在编译时失败了。

1 个答案:

答案 0 :(得分:3)

您可以在公共模块中导入ReactiveFormsModule,而不是在主模块中导入ReactiveFormsModule:

@NgModule({
    imports: [ReactiveFormsModule],
exports:[ReactiveFormsModule]
})
export class AppCommonsModule{}

您还可以在此处为所有子模块提供常见的应用级服务,但如果您需要为您的应用提供单件服务,请务必小心。切勿在通用模块中提供任何单件服务。 您只需要在所有子模块中导入一个模块。 See more