Как добавить маршруты ngModule в качестве дочерних маршрутов другого ngModule в Angular2?

Я следую этому учебнику, чтобы иметь архитектуру моего приложения.

Чтобы предоставить дополнительную информацию, рассмотрим A как appModule, а B - еще один основной модуль. Теперь я хочу загрузить другие модули (NgModule, который имеет много других маршрутов) внутри B <router-outlet>.

Что лучше для этого?

Это то, что я сделал до сих пор

-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 и Auth. MainBoard имеет заголовок, sidenav, нижний колонтитул, а в центре я хочу загрузить пользователей и отдел, используя <router-outlet>.

Я хочу загрузить localhost/app/users, чтобы загрузить список пользователей и localhost/app/department, чтобы загрузить список отделов.

Мой main-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{}

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

//маршрут пользователя

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?

Ответ 1

Ваша методология верна. В этом подходе нужно импортировать только childmodule в parentmodule, что он. Childmodule позаботится о своей собственной маршрутизации. Аналогично, если у вас есть вложенные модули, только модули должны импортироваться в родительские маршруты, а не объявлять много маршрутов в одном месте.

Ответ 2

Вам необходимо использовать свойство loadChildren в определении маршрута, а не дочерние в маршрутизаторах, затем указать дочерний модуль (либо в виде строки, разделенной символом "#", либо как функции, возвращающей модуль)

Ответ 3

Ваш подход прав. Вы хотите разделить маршруты на свои собственные подмодули. Технически вы можете перемещать маршруты в любой модуль по мере их объединения, но, вероятно, это будет плохая идея в долгосрочной перспективе.

Плункер с результирующими маршрутами 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 {}

Ответ 4

ваш подход прав, вы должны разделить вашу маршрутизацию, специфичную для модуля, например, связанная с пользовательским модулем маршрутизация идет в пользовательском модуле, она будет очень полезной, поскольку размер приложения растет, теперь я думаю, что вы должны попробовать эту модификацию.

//файл маршрутов основной платы

  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

Ответ 5

Вам нужно 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 {
}

Ответ 6

Как уже говорилось ранее, но я хотел бы быть немного понятным. Использование подмодуля для разделения функций приложения очень хорошо, так как приложение растет, они позволяют сохранить простую структуру кода.

Лучший способ управлять этим процессом - создать структуру папок следующим образом:

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

В каждом функциональном модуле вы объявляете маршруты для этого модуля: file feature.routes.ts:

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

и они импортируют эти маршруты в свой функциональный модуль file feature.module.ts:

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

Последнее, что нужно сделать, это импортировать все материалы в модуль маршрутизации, ленивая загрузка идеально подходит для выполнения типичного приложения.

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

И финский импорт модуля маршрутизации в ваш модуль приложения file app.module.ts:

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

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

Ответ 7

hi ниже я дал пример модуля маршрутизации для модуля app.module и функции.

Файл маршрутизации модуля приложения-маршрутизации содержит первичные маршруты, а файл маршрутизации функционального модуля содержит корень для дочерних корней. надеюсь, что это поможет результирующему выходу/функции/книгам.

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

feature-routing.module.ts//импортировать это в 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 {
}