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

Ответ 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 {
}