Jak dodać trasy ngModule jako trasy podrzędne innego modułu w Angular2?

Question

Postępuję zgodnie z tym tutorial, aby mieć architekturę mojej aplikacji.

Aby podać więcej informacji, rozważmy A jako appModuł, a kolejnym ważnym modułem jest B. Teraz chcę załadować inne moduły (NgModule, które ma wiele innych tras) wewnątrz B's <router-outlet>.

Jakie jest lepsze podejście do tego?

To, co zrobiłem do tej pory

-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 

Mam 2 główne moduły, płyty głównej i Auth. MainBoard ma nagłówek, sidenav, stopkę i na środku Chcę załadować użytkowników i dział, używając <router-outlet>.

Chcę załadować localhost/app/users, aby załadować listę użytkowników i localhost/app/department, aby załadować listę oddziałów.

Główny-board.module i users.module wyglądać następująco

// 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{} 

// main-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); 

// droga użytkownika

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); 

Czy moim podejściem jest posiadanie dziecka z modułem NgModule z własnymi trasami lub czy muszę je zmienić na prosty komponent i czy wszystkie trasy w trasach modułów są trasami main-board?

Answer 1

Twoja metodologia jest poprawna. W tym podejściu należy zaimportować tylko childmodule do parentmodule, to wszystko. Childmodule zajmie się własnym routingiem. Podobnie, jeśli masz moduły zagnieżdżone, tylko moduły muszą zostać zaimportowane na trasach nadrzędnych, zamiast deklarować wiele tras w jednym miejscu.

Answer 2

Musisz użyć właściwości loadChildren w definicji trasy, zamiast elementów potomnych w routerach, a następnie wskaż moduł potomny (jako ciąg ograniczony przez "#" lub jako funkcja zwracająca moduł)

Answer 3

Twoje podejście jest prawidłowe. Chcesz podzielić trasy na ich własne podmoduły. Z technicznego punktu widzenia możesz przenosić trasy do dowolnego modułu, ponieważ są scalone, ale prawdopodobnie będzie to zły pomysł w dłuższej perspektywie.

Plunker z wynikającymi trasach 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 {} 

Answer 4

Twoje podejście jest słuszne należy podzielić routing specyficzne dla modułu jak moduł użytkownik związanych routingu idzie w module użytkownika zostanie ona bardzo pomocni jak wielkość aplikacji rośnie teraz myślę, że powinieneś spróbować tych modyfikacji.złożyć

trasy // main board

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 

Answer 5

Co trzeba to 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 { 
} 

Answer 6

Jak wcześniej powiedziałem od innych, ale chciałbym być trochę jasny. Używanie pod-modułu do dzielenia funkcji aplikacji jest bardzo dobre, ponieważ aplikacja rośnie, pozwala zachować prostą strukturę kodu.

Najlepszym sposobem, aby zarządzać tym procesem jest mieć strukturę folderów tak:

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 

w module każda cecha jest zadeklarować trasy dla tego particoular module: plików feature.routes.ts:

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

i importować to trasy w swojej cechą jest moduł feature.module.ts plik:

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

Ostatnią rzeczą do zrobienia jest zaimportowanie wszystkich elementów w module routingu. Leniwe ładowanie jest idealne do wykonania typowej aplikacji.

pliku 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 {} 

I finnaly importowanie modułu routingu do aplikacji moduł app.module.ts plików:

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

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

Answer 7

hi poniżej dałem przykładowy moduł routingu dla app.module i modułu funkcji.

Plik routingu modułu routingu aplikacji zawiera podstawowe trasy i plik routingu modułu obiektów zawiera rooting dla potomnych katalogów głównych. Hope this helps otrzymany Roure jest/funkcja/książki

app-routing.module.ts // importować ten w 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 { 
} 

funkcje routing.module.ts // importować ten w 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 { 
} 

Answer 8

zrobiłem to w moim ostatnim projekcie. Oto próbka

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 eksport RouteHolderComponent który właśnie ma <router-outlet></router-outlet> tag w nim.