Question

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

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

在我们的例子中，为路径设置一个路径：'/ dashboard'组件：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

没有必要将组件导入主（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 {
}

OR

您可以在主模块中导入DashboardModule，如果路径没有延迟加载，它将会起作用。

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

希望这会有所帮助!!

Answer 2

事实证明，延迟加载在RC5中没有正常工作，只是升级到RC6，一切正常。

Answer 3

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

Angular 2中模块之间的路由

3 个答案: