angualr2之路由与导航（一）

1. 唯一根模块式组件导航

在唯一根模块式组件导航中，全局只有一个模块，即根模块。

1.1 根模块

在根模块中，需要导入所有组件及其对应的服务，并将组件加入声明，将其对应的服务加入提供商。

// app.module.ts
// 导入组件
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MenuComponent } from './menu/menu.component';
import { M0201Component } from './m0201/m0201.component';
import { M0202Component } from './m0202/m0202.component';
import { M0301Component } from './m0301/m0301.component';
import { M0302Component } from './m0302/m0302.component';

// 导入服务
import { UserLogin } from './service/userlogin';
import { MenuService } from './service/menu.service';
import { M0201Service } from './service/m0201.service';
import { M0202Service } from './service/m0202.service';
import { M0301Service } from './service/m0301.service';
import { M0302Service } from './service/m0302.service';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MenuComponent,
    M0201Component,
    M0202Component,
    M0301Component,
    M0302Component,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ...
  ],
  providers: [
    UserLogin,
    MenuService,
    M0201Service, 
    M0202Service,
    M0301Service, 
    M0302Service,
  ],
  bootstrap: [AppComponent]
})

1.2 根路由

在根路由中，需要导入所有组件，并配置其路由路径

// app.routing.ts
// 导入组件
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MenuComponent } from './menu/menu.component';
import { M0201Component } from './m201/m0103.component';
import { M0202Component } from './m0104/m0104.component';
import { M0301Component } from './m0301/m0301.component';
import { M0302Component } from './m0302/m0302.component';

// 定义路由
const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'menu/0104/0201', redirectTo: '/menu/0201', pathMatch: 'full' },
  { path: 'menu/0104/0202', redirectTo: '/menu/0202', pathMatch: 'full' },
  { path: 'menu/0104/0301', redirectTo: '/menu/0301', pathMatch: 'full' },
  { path: 'menu/0104/0302', redirectTo: '/menu/0302', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'menu', component: MenuComponent,
    children: [
      { path: '0201', component: M0201Component },
      { path: '0202', component: M0202Component },
      { path: '0301', component: M0301Component },
      { path: '0302', component: M0302Component },
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

当首次加载页面时，指向 /login ，默认加载路径为空，则加载组件 LoginComponent ，当页面指向发生更改，指向 /menu/0302 时，则重新寻找其对应的路径，即 menu/0104/0302,此时，加载组件被设置为 M0302Component ，那么，页面导航便在这些组件当中往复跳转。

1.3 英雄组件实例

// app.module.ts
import { AppComponent }        from './app.component';
import { DashboardComponent }  from './dashboard-component/dashboard.component';
import { HeroesComponent }     from './heroes-component/heroes.component';
import { HeroService }         from './hero-service/hero.service';

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    ...
  ],
  declarations: [ 
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})

// app.routing.module.ts
import { HeroesComponent }     from './heroes-component/heroes.component';
import { DashboardComponent }  from './dashboard-component/dashboard.component';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'heroes',     component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

2. 父子模块式路由导航

在父子模块式路由导航中，全局包含一个根模块，一个根路由，以及多个子模块，子模块中含有一个或多个组件。在根模块中，将导入所有子模块，在根路由中，将导入所有子模块中的组件，这样，就无需在根模块中导入这些组件的服务。

// app.module.ts
import { AppComponent } from './app.component';
import {IndexModule} from './index/index.module';
import {CreatMemberModule} from './creat-member/creat-member.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    IndexModule,
    CreatMemberModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// app.routing.module.ts
import {IndexComponent} from './index/index.component';
import {CreatMemberComponent} from './creat-member/creat-member.component';

const routes: Routes = [
  { path: '', redirectTo: '/index', pathMatch: 'full' },
  { path: 'index',  component: IndexComponent },
  { path: 'creat-member',  component: CreatMemberComponent },
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

// index.module.ts
import { IndexComponent } from './index.component';
import { indexService } from './index.service';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [indexService],
  declarations: [IndexComponent]
})

3. 惰性加载式一级路由导航

与父子模块式路由导航大同小异，在惰性加载式路由导航中，将为每个子模块添加路由，即设置子路由，然后将子路由导入到子模块，再将子模块引入到根路由中以惰性加载形式呈现，这样就不需要在根路由中导入组件本身。

// app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: 'index', loadChildren: 'app/index/index.module#IndexModule' },
  { path: 'creat-member', loadChildren: 'app/creat-member/creat-member.module#CreatMemberModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

// index.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IndexRoutingModule } from './index-routing.module';
import { IndexComponent } from './index.component';
import { indexService } from './index.service';

@NgModule({
  imports: [
    CommonModule,
    IndexRoutingModule,
  ],
  providers: [indexService],
  declarations: [IndexComponent]
})

// index-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IndexComponent } from './index.component';

@NgModule({
  imports: [RouterModule.forChild([
    { path: '', component: IndexComponent }
  ])],
  exports: [RouterModule]
})

4. 惰性加载式二级路由导航

惰性加载二级路由时，基本设置与3中保持不变。区别在于在惰性加载一级相应路由模块之后，在某一模块内，还存在内部路由，导航指向该模块时，指明其内部路由路径时，即可惰性加载该模块。

// app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: 'index', loadChildren: 'app/index/index.module#IndexModule' },
  { path: 'router-nav', loadChildren: 'app/router-nav/router-nav.module#RouterNavModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

// router-nav.module.ts
/import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterNavComponent } from './router-nav.component';
import { RouterNavRoutingModule} from './router-nav-routing.module';

@NgModule({
  imports: [
    CommonModule,
    RouterNavRoutingModule,
  ],
  declarations: [RouterNavComponent]
})

// router-nav-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RouterNavComponent } from './router-nav.component';

const appChildRoutes: Routes = [
  {
    path: '', component: RouterNavComponent,
    children: [
      { path: '', redirectTo: 'creat-member', pathMatch: 'full' },
      { path: 'creat-member', loadChildren: 'app/creat-member/creat-member.module#CreatMemberModule' },
      { path: 'task-info', loadChildren: 'app/task-info/task-info.module#TaskInfoModule' }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(appChildRoutes)],
  exports: [RouterModule]
})

5. 预加载惰性模块

在开发中，大量使用惰性加载，会造成页面加载迟缓，此处，我们将对惰性加载模块进行预加载，并且改惰性加载二级子模块为直接加载组件，减少中间交互层。

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const appRoutes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: 'index', loadChildren: 'app/index/index.module#IndexModule' },
  { path: 'router-nav', loadChildren: 'app/router-nav/router-nav.module#RouterNavModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })], //预加载
  exports: [RouterModule]
})

// router-nav.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterNavComponent } from './router-nav.component';
import { RouterNavRoutingModule } from './router-nav-routing.module';
import { CreatMemberComponent } from './creat-member/creat-member.component';
import { CreatMemberService } from './creat-member/creat-member.service';

@NgModule({
  imports: [
    CommonModule,
    RouterNavRoutingModule,
    ...
  ],
  declarations: [
    RouterNavComponent,
    CreatMemberComponent,
  ],
  providers: [
    CreatMemberService,
  ]
})

// router-nav-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RouterNavComponent } from './router-nav.component';
import { CreatMemberComponent } from './creat-member/creat-member.component';

const appChildRoutes: Routes = [
  {
    path: '', component: RouterNavComponent,
    children: [
      { path: '', redirectTo: 'creat-member', pathMatch: 'full' },
      { path: 'creat-member', component: CreatMemberComponent },
      { path: 'project-center', component: ProjectCenterComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(appChildRoutes)],
  exports: [RouterModule]
})