Angular2管理大量組件

我正在使用Angular2。正如我們所知，我們需要在主模塊中配置所有providers，components，services。可能是這種情況，我們有大量的components並手動配置它。例如，請考慮以下moduleAngular2管理大量組件

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 會有什麼配置此大量組件沒有太多的複製粘貼的正確方法？

另外，我相信應該有多個模塊。你有什麼建議或正確的做法？

來源

2017-03-23 Thabung

無。你只有兩個選擇 - 1.和它一起住，或者2.讓它們儘可能獨立，並把它們放在子模塊中。請記住，您也可以在子模塊中擁有路由，因此您可能需要創建一個commonsmodule，該模塊將具有可重用組件和一個子模塊，並將其作爲具有自己的組件和路由的expensemodule，然後執行導入。 – Gary

對於服務創建單獨的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 

    }

來源

2017-03-23 09:40:08 Vignesh

Angular2管理大量組件

回答

相關問題