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

雖然這個邏輯很好，但我會將所有權限放在帳戶管理組件模塊中，以便將來在功能上打勾和關閉，而您不希望您的用戶擁有您可能想要升級用戶帳戶的所有權限未來。 如果您的系統確實熱衷於該邏輯，則可擴展性和預見性可以為您節省未來編碼的時間。