Angular2에서 다른 ngModule의 자식 경로로 ngModule 경로를 추가하는 방법은 무엇입니까?

귀하의 방법론이 정확합니다. 이 접근 방식에서는 하나만 가져올 필요가 있습니다.자식 모듈으로부모 모듈, 그게 다야.차일드 모듈자체 라우팅을 처리합니다. 마찬가지로 중첩 모듈이있는 경우 한 곳에서 많은 경로를 선언하는 대신 모듈 만 상위 경로로 가져와야합니다.

귀하의 접근 방식이 옳습니다. 경로를 자체 하위 모듈로 분할하려고합니다. 기술적으로는 병합되는 모든 모듈로 경로를 이동할 수 있지만 장기적으로는 나쁜 생각 일 수 있습니다.

결과 경로가있는 벙커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 {}

다른 사람들로부터 전에 말했듯이, 나는 조금 분명히하고 싶습니다. 응용 프로그램 기능을 나누기 위해 하위 모듈을 사용하면 응용 프로그램이 커지면서 간단한 코드 구조를 유지할 수 있으므로 매우 유용합니다.

이 프로세스를 관리하는 가장 좋은 방법은 다음과 같은 폴더 구조를 만드는 것입니다.

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

라우터의 하위 노드 대신 경로 정의에서 loadChildren 속성을 사용해야하고 하위 모듈을 가리킬 수 있습니다 ( "#"로 구분 된 문자열 또는 모듈을 반환하는 함수로 지정)

귀하의 접근 방식은 사용자 모듈과 같은 모듈에 관련된 라우팅을 적절하게 나눠야합니다. 라우팅은 사용자 모듈에서 진행됩니다. 응용 프로그램의 크기가 커짐에 따라 도움이 될 것입니다. 이제는 이러한 수정을 시도해야한다고 생각합니다.

// 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.forRoot(MainBoardRoutes); // use for root instead of for child 

필요한 것은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 {
}

• lazy-loading의 반대는 eager-loading이다. - fscheidl
• @fscheidl님께 감사드립니다. 아직까지는 아무 것도 모릅니다. - borislemke

안녕하세요 아래 예제 모듈을 app.module 및 기능 모듈에 부여했습니다.

응용 프로그램 라우팅 모듈 라우팅 파일에는 기본 경로가 포함되어 있으며, 기능 모듈 라우팅 파일에는 하위 루트에 대한 응원이 포함되어 있습니다. 이것이 결과물 인 roure가 / feature / books인데 도움이되기를 바랍니다.

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

최근 프로젝트에서이 작업을 수행했습니다. 다음은 샘플입니다.

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>태그 안에.