Angular 2 模块之间的路由

Question

我正在编写一个应用程序，其中所有功能都有自己的模块（功能可以是页面，也可以是页面的一部分）。 这是因为我们希望所有功能都有自己的域逻辑、服务、指令和组件，即在仪表板模块中，我们有一个 ChartComponent 小部件，我不想将其公开给其他视图，如登录或配置文件。

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

在我们的例子中，要为 path: '/dashboard' component: DashboardComponent 设置一个路由，我们需要在 app.module.ts 中声明 DashboardComponent，这很好，但由于我们仍在模块 app.module 中，我们的 CharComponent 是未公开且不会在我们的 DashboardComponent 中呈现，因为它是在dashboard.module.ts 中声明的，而不是在 app.module.ts 中声明的。

如果我们在 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

不需要将组件导入 main(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 并且一切正常。

Answer 3

虽然这个逻辑很好，但我会将所有权限放在帐户管理组件模块中，以便将来在功能上打勾和关闭，而您不希望您的用户拥有您可能想要升级用户帐户的所有权限未来。 如果您的系统确实热衷于该逻辑，则可扩展性和预见性可以为您节省未来编码的时间。