Angular2 管理大量组件答案

【问题标题】：Angular2 Manage large number of componentsAngular2 管理大量组件
【发布时间】：2017-03-23 09:35:02
【问题描述】：

我正在研究 Angular2。我们知道我们需要在主模块中配置所有providers、components、services。可能是我们有大量components并手动配置的情况。例如，考虑以下module

 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { GoogleSigninComponent } from ./auth/google.login.component';
 import { ApiEndpoints } from './api.endpoints';
 // Providers
 import { AuthService } from './auth/auth.service';
 import { AppRoutingModule } from './route';
 import { ExpenseComponent } from './expense/expense.component';
 import { ExpenseService } from './expense/expense.service';

 import { GroupService } from './group/group.service';
 import {GroupUserService} from './group/group-user.service';
 import {MainGroupComponent, SaveGroupComponent, GroupListComponent } from './group/group.components';
 import {GroupUsersComponent,AddGroupUserComponent} from './group/group-  user.component';
 import {HelperService } from './helper.service';
 import {SearchUserComponent} from './user/users.component';
 import {UserService} from './user/users.service';


@NgModule({
  imports: [BrowserModule, HttpModule, BrowserModule, AppRoutingModule, FormsModule],
  declarations: [AppComponent, GoogleSigninComponent,
  ExpenseComponent, SaveGroupComponent, GroupListComponent, GroupUsersComponent,
MainGroupComponent,AddGroupUserComponent,SearchUserComponent],
 bootstrap: [AppComponent],
 providers: [AuthService, ApiEndpoints, ExpenseService,
 GroupService,GroupUserService,HelperService,UserService]
  })

我需要在routes 和cubersome 中进行相同的配置什么是配置大量组件而无需大量复制粘贴的正确方法？

另外，我认为应该有多个模块。您有什么建议或正确的做法？

【问题讨论】：

无。您只有两个选择 - 1. 忍受它或 2. 使它们尽可能独立并将它们放在子模块中。请记住，您也可以在子模块中拥有路由，因此您可能希望创建一个只有可重用组件的 commonsmodule 和一个称为费用模块的子模块，该模块具有自己的组件和路由，然后导入它们。

标签： angular angular2-components angular2-modules

【解决方案1】：

为服务创建一个单独的 shared.ts 文件并导入和导出所有服务。因此，为每个文件创建一个像这样的 .ts 文件例如看下面的代码

import { GroupService } from './group/group.service';
import {GroupUserService} from './group/group-user.service';

const SHARED_PROVIDERS: any[] = [
  GroupService ,
  GroupUserService
];

    export{
    Shared_Providers,
    GroupService ,
    GroupUserService

    }

【讨论】：