Angular 2中模块之间的路由

Question

我正在编写一个应用程序,其中所有功能都有自己的模块(功能可以是页面,也可以是页面的一部分).这是因为我们希望所有功能都拥有自己的域逻辑,服务,指令和组件,即在仪表板模块中我们得到了一个ChartComponent小部件,我不想将其暴露给其他视图,如登录或配置文件.

问题是当在Angular 2中使用路由时,您总是路由到特定组件,而不是模块.

在我们的例子中,为路径设置路径:'/ dashboard'组件:DashboardComponent我们需要在app.module.ts中声明DashboardComponent,这没关系,但是因为我们仍然在模块app.module中我们的CharComponent是因为它是在dashboard.module.ts而不是app.module.ts中声明的,所以我们的DashboardComponent中没有公开并且不会渲染.

如果我们在app.module.ts中声明ChartComponent它应该正常工作但我们失去了应用程序的架构.

应用程序的文件结构如下:

?? 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

Answer 1

没有必要将组件导入主(app)模块,

如果你懒洋洋地加载路线,你可以定义如下的路径,

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

希望这可以帮助!!

Answer 2

事实证明，延迟加载在 RC5 中不能正常工作，只需升级到 RC6 就可以了。