angular - Angular 2 模块之间的路由

Question

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

问题是在 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 {
}