如何將ngModule路由添加爲Angular2中另一個ngModule的子路由？

我跟隨此tutorial有一個我的應用程序的體系結構。如何將ngModule路由添加爲Angular2中另一個ngModule的子路由？

要提供更多信息，可以考慮將A作爲appModule，而B是另一個主要模塊。現在我想在B的<router-outlet>里加載其他模塊（NgModule，其中有很多其他的路由）。

什麼是更好的方法來做到這一點？

這是我迄今

-mainBoard (Folder next to app.Module) 
    --mainBoard Routes 
    --mainBoard Component 
    --mainHeader Component 
    --mainFooter Component 
    --mainSidenav Component 

    -Users (Folder inside mainBoard) 
    --User Module 
    --User Routes 
    --UserList Component 
    --UserDetail Component 
    --UserSetting Component 

    -Departments (Folder inside mainBoard) 
    --Department Module 
    --Department Routes 
    --DepartmentList Component 
    --DepartmentDetail Component 

-Auth (Folder next to mainBoard folder) 
    --Auth Module 
    --Auth Component 
    --Auth Routes 
    -Sign-in (Folder) 
    --Sign-in Component 
    -Sign-up (Folder) 
    --Sign-up Component 

-App Module

我有2個主要模塊，主板和驗證完成。 MainBoard有一個頁眉，sidenav，頁腳，在中心我想用<router-outlet>加載用戶和部門。

我想加載localhost/app/users加載用戶列表和localhost/app/department加載部門列表。

我的主board.module和users.module這個樣子

// main-board.module.ts 
import {MainBoardRouting} from './main-board.routes'; 

import {UsersModule} from './users/users.module'; 
import {DepartmentsModule} from './departments/departments.module'; 

@NgModule({ 
    imports :[ 
     MainBoardRouting, 
     UsersModule, 
     DepartmentsModule 
    ], 
    declarations : [ 
     MainBoardComponent, 
     MainHeaderComponent, 
     MainFooterComponent, 
     MainSidenavComponent 
    ], 
    providers: [] 
}) 
export class MainBoardModule{}

// Users.module.ts

import {NgModule} from '@angular/core'; 

import {usersRouting} from './users.routes'; 
import {UserListComponent} from './user-list'; 
import {UserDetailComponent} from './user-detail'; 

@NgModule({ 
    imports :[ 
     usersRouting 
    ], 
    declarations : [ 
     UserListComponent, 
     UserDetailComponent 
    ], 
    providers: [] 
}) 
export class UsersModule{}

//主board.routes

import { RouterModule,Routes } from '@angular/router'; 

import { MainBoardComponent } from './main-board.component'; 

const MainBoardRoutes: Routes = [{ 
    path: 'app', 
    component: MainBoardComponent 
}]; 
export const MainBoardRouting = RouterModule.forChild(MainBoardRoutes);

//用戶路線

import { Routes, RouterModule } from '@angular/router'; 

import { UserListComponent } from './user-list'; 
import { UserDetailComponent } from './user-detail'; 

export const usersRoutes: Routes = [ 
    {path: '', redirectTo: 'app/users', pathMatch:'full'}, 
    { path: 'users', component: UserListComponent }, 
    { path: 'user/:id', component: UserDetailComponent } 
]; 

export const usersRouting = RouterModule.forChild(usersRoutes);

我的方法正確地讓孩子NgModule具有自己的路由，還是必須將它們更改爲簡單組件，並且擁有main-board模塊路由中的所有路由？

來源

2016-08-19 Gan

這些帖子應該有助於http://stackoverflow.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files/39151698#39151698 http://stackoverflow.com/questions/38879529/how-to-路由模塊作爲一個模塊的角度2-rc-5 – cboston

我遇到了這種方法有關如何指定'插入'功能模塊路由父模塊路由器配置： http://stackoverflow.com/questions/41723540/angular2-whats-the-equivalent-of-the-router-loadchildren-without-lazy-loadin 這種方法適合你嗎？ – Clement

您的方法是正確的。在這種方法中，只需要將子模塊導入父模塊，就是這樣。 子模塊將照顧它自己的路由。同樣，如果你有嵌套模塊，只需要在父路由中導入模塊，而不是在一個地方聲明很多路由。

來源

2016-10-12 06:03:39

您需要使用路徑定義中的loadChildren屬性（而不是路由器中的子節點），然後指向子模塊（作爲由「＃」分隔的字符串或作爲返回模塊的函數）

來源

2016-10-28 19:34:55

你的方法是對的。您想要將路線拆分爲他們自己的子模塊。從技術上講，你可以將路線移動到任何模塊，因爲它們被合併，但從長遠來看，這可能是一個壞主意。

Plunker，導致路線 https://plnkr.co/edit/Y9ReEwnBZNId48xX1CDR?p=preview

@Component({ 
    selector: 'users', 
    template: ` 
    <div> 
     <h2>Users</h2> 
     <ul><li *ngFor="let user of users">{{user}}</li></ul> 
    </div> 
    `, 
}) 
export class Users { 
    users = ["John", "Joe"]; 
} 

const usersRoutes = [ 
    {path: 'users', component: Users} 
]; 
const UsersRoutes = RouterModule.forChild(usersRoutes); 


@NgModule({ 
    imports: [ CommonModule, UsersRoutes ], 
    declarations: [ Users ], 
    exports: [ Users ] 
}) 
export class UsersModule {}

來源

2016-12-19 22:36:09

你的做法是正確的，你要分具體到類似的用戶模塊相關的路由模塊就在用戶模塊的路由將非常有助於充分作爲應用程序的大小現在增長，我認爲你應該嘗試這些修改。

//主板routes文件

import { RouterModule,Routes } from '@angular/router'; 

import { MainBoardComponent } from './main-board.component'; 

    const MainBoardRoutes: Routes = [{ 
     path: 'app', 
     component: MainBoardComponent 
    }]; 
export const MainBoardRouting = 
RouterModule.forRoot(MainBoardRoutes); // use for root instead of for child

來源

2017-04-11 16:53:48 ashutosh

你需要的是loadChildren

child.module.ts

const childRoutes: Routes = [ 
    { 
     path: '', 
     component: ChildComponentA 
    }, 
    { 
     path: 'other', 
     component: ChildComponentB 
    } 
] 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(childRoutes) 
    ] 
}) 
class MyChildModule {}

app.module.ts

const appRoutes: Routes = [ 
    { 
     path: 'children', 
     // If using a function that returns the Module, 
     // it will be "eager-loaded" 
     loadChildren:() => MyChildModule 
     // When using a string, it will be lazy-loaded 
     // loadChildren: './path/to/child.module#MyChildModule' 
    } 
] 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(appRoutes) 
    ] 
}) 
class AppModule { 
}

來源

2017-05-26 17:45:39 borislemke

延期加載的對面是渴望加載 – fscheidl

@fscheidl感謝信息，我仍然不知何故直到現在還沒有想通 – borislemke

正如之前所說的，但我想稍微清楚一點。使用子模塊劃分應用程序功能非常好，隨着應用程序的增長，它們允許保持簡單的代碼結構。

來管理這個過程，最好的辦法是有一個文件夾結構是這樣的：

src 
    - featureA 
    - featureA.routes.ts 
    - fefatureA.module.ts 
    - component1 
     - component1.ts 
     - [...] 
    - component2 
     - component2.ts 
     - [...] 
    - [...] 

    - featureB 
    - featureB.routes.ts 
    - fefatureB.module.ts 
    - component1 
     - component1.ts 
     - [...] 
    - component2 
     - component2.ts 
     - [...] 
    - [...] 

    - [...] 

    - app-routing.module.ts 
    - app.module.ts

在每一個功能的模塊聲明此particoular模塊的路線：文件feature.routes.ts：

const routerConfig: Routes = [ 
    { 
     path: '', 
     component: Component1 
    }, 
    { 
     path: 'other', 
     component: Component2 
    } 
]

，他們導入在功能的模塊文件feature.module.ts這個路線：

import { routerConfig } from "./feature.routes"; 
     @NgModule({ 
      imports: [ 
      RouterModule.forChild(routerConfig), 
      ], 
     }) 
export class FeatureModule{}

最後要做的就是導入路由模塊中的所有東西，延遲加載對於典型應用程序的性能來說是完美的。

文件app-routing.module.ts：

import { FeatureAModule } from './featureA/featureA.module'; 
import { FeatureBModule } from './featureB/featureB.module'; 
    @NgModule({ 
     imports: [ 
     RouterModule.forRoot([ 
      { path: '', loadChildren:()=> require("./featureA/featureA.module")["FeatureAModule"]}, 
{ path: 'feature-b', loadChildren:()=> require("./featureB/featureB.module")["FeatureBModule"]}, 
     ], 
     { preloadingStrategy: PreloadAllModules}) //Define the loading strategy 
     ], 
    }) 
    export class AppRoutingModule {}

而且finnaly導入路由模塊到你的應用程序模塊文件app.module.ts：

import { AppRoutingModule } from './app-routing.module'; 

@NgModule({ 
    imports: [ 
    AppRoutingModule, 
    ], 
}) 
export class AppModule {}

來源

2017-06-27 12:43:08

喜下面我給app.module和feature模塊的示例路由模塊。

應用路由模塊路由文件包含主要路由和特徵模塊路由文件包含子根的生根。希望這有助於產生的ROURE是/特徵/書籍

APP-routing.module.ts //在app.module.ts導入此

import {NgModule} from '@angular/core'; 
import {RouterModule, Routes} from '@angular/router'; 

export const routes: Routes = [ 
    { path: 'feature', loadChildren: 'app/feature/feature.module#FeatureModule'}, 
    { path: '', redirectTo: 'feature', pathMatch: 'full' }, 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 

export class AppRoutingModule { 
}

功能routing.module.ts //導入此in feature.module.ts

import {NgModule} from '@angular/core'; 
import {RouterModule, Routes} from '@angular/router'; 

// ---- components imported---- 
import { BooksComponent } from './books/books.component'; 
import { FeatureComponent } from './feature.component'; 

const featureRoutes: Routes = [ 

    { 
    path: '', 
    component: FeatureComponent, 
    children: [ 
     {path: '', redirectTo: 'books', pathMatch: 'full'}, 
     {path: 'books', component: BooksComponent}, 
     {path: '**', redirectTo: 'books', pathMatch: 'full'}, 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(featureRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class FeatureRoutingModule { 
}

來源

2017-09-01 11:44:20

我在最近的項目中做了這個。下面是示例

app.routing.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

@NgModule({ 
imports: [ 
    RouterModule.forRoot([ 
     { path: '', loadChildren: '../home/home.module#HomeModule' }, 
     { path: 'settings', loadChildren: '../settings/settings.module#SettingsModule' }, 
     { path: 'home', redirectTo: '', pathMatch: 'full' } 
    ]) 
], 
exports: [ 
    RouterModule 
] 
}) 
export class AppRoutingModule { 
}

home.module。TS

//all necessary imports 

@NgModule({ 
imports: [ 
    CommonModule, 
    TranslateModule, 
    FormsModule, 
    RouterModule.forChild([ 
     { 
      path: '', component: HomeComponent, canActivate: [SecureGuard] 
     } 
    ]), 
    ViewCountPipeModule 
], 
declarations: [ 
    HomeComponent 
], 
providers: [ 
    SecureGuard, 
    CommonService 
] 
}) 
export class HomeModule { 
}

settings.module.ts

//all the necessary imports 

@NgModule({ 
imports: [ 
    CommonModule, 
    TranslateModule, 
    FormsModule, 
    RouterModule.forChild([ 
     { 
      path: '', component: RouteHolderComponent, 
      children: [ 
       { path: '', redirectTo: 'settings', pathMatch: 'full' }, 
       { path: 'settings', component: SettingsComponent }, 
       { path: 'profile', loadChildren: '../profile-settings/profile-settings.module#ProfileSettingsModule' }, 
       { path: 'account', loadChildren: '../account-settings/account-settings.module#AccountSettingsModule' } 
      ], canActivate: [SecureGuard] 
     } 
    ]), 
    RouteHolderModule 
], 
declarations: [ 
    SettingsComponent 
], 
providers: [ 
    SecureGuard, SettingsService 
] 
}) 
export class SettingsModule { 
}

RouteHolderModule出口RouteHolderComponent這只是有一個<router-outlet></router-outlet>標籤在裏面。

來源

2018-01-30 08:12:14 SumeetKale

如何將ngModule路由添加爲Angular2中另一個ngModule的子路由？

回答

相關問題