Маршрутизация между модулями в Angular 2

Я пишу приложение, где все функции имеют собственный модуль (функция может быть страницей или частью страницы). Это потому, что мы хотим, чтобы у всех функций была собственная логика домена, службы, директивы и компоненты, т.е. В модуле панели мониторинга появился виджет ChartComponent, который я не хочу раскрывать для других представлений, таких как логин или профиль.

Проблема заключается в том, что при работе с маршрутизацией в Angular 2 вы всегда направляетесь к определенному компоненту, а не к модулю.

В нашем случае для настройки маршрута для компонента "/dashboard": DashboardComponent нам нужно объявить DashboardComponent в app.module.ts, и это прекрасно, но поскольку мы все еще находимся в модуле app.module наш CharComponent не отображается и не будет отображаться в нашей DashboardComponent, поскольку он объявлен в dashboard.module.ts, а не app.module.ts.

Если мы объявим ChartComponent в app.module.ts, он работает так, как должен, но мы потеряли архитектуру для нашего приложения.

Структура файла для приложения выглядит примерно так:

└─ src/
   └─ app/
      ├─ app.module.ts
      ├─ app.component.ts
      ├─ app.routing.ts
      ├─ profile/
      |  ├─ profile.module.ts
      |  └─ profile.component.ts
      ├─ login/
      |  ├─ login.module.ts
      |  └─ login.component.ts
      └─ dashboard/
         ├─ dashboard.module.ts
         └─ dashboard.component.ts
            └─ chart/
               └─ chart.component.ts

Ответ 1

Оказалось, что ленивая загрузка не работала должным образом в RC5, просто обновилась до RC6, и все это сработало.

Ответ 2

Не нужно импортировать компоненты в основной (приложение) модуль,

Если вы загружаете маршруты лениво, вы можете просто определить путь, как показано ниже,

// In app module route
{
 path: 'dashboard',
 loadChildren: 'app/dashboard.module#DashboardModule'
}

// in dashboard module
const dashboardRoutes: Routes = [
  { path: '',  component: DashboardComponent }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

@NgModule({
  imports: [
   dashboardRouting
  ],
  declarations: [
    DashboardComponent
  ]
})
export class DashboardModule {
}

ИЛИ

Вы можете просто импортировать DashboardModule в основной модуль, и он будет работать, если маршруты не будут лениво загружены.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Надеюсь, это поможет!

Ответ 3

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