Angular2 父子路由问题

没有选择是痛苦的，有太多的选择也是痛苦的，目前前端框架层出不穷。选择一个框架需要去考虑很多问题。
angular作为一款优秀的前端框架目前很受欢迎。而angular团队也在去年9月份发布了angular2
angular2 与angular1 并不是简单的升级，而是对angular1 的重写。并不是你学过angular1 就可以很快上手angular2的。在angular2与angular1相比增加了类似组件的书写体验。
同时导致angular2重写的重要原因在于angular1 的性能问题，angular1由于最初架构的限制，想要提高性能是非常困难的，因此对其进行了重写。同时angular1是落后于目前web的发展理念，在手机端的支持也不是很好（性能方面）。

angular2 的优势在于：
1、angular2 引入了ES6 与typeScript（下文使用ts代表），而ES6 规范必是将来发展的趋势。
2、更好的速度和性能
3、更简单的依赖注入
4、灵活的路由，具备延迟加载功能

angular2简化了路由，同时提供了模块级的路由和 定义的灵活性（可写为常量或定义为模块）
angular2官方建议将路由模块化，这样可以降低耦合度。

app.module.ts 文件为一个App的入口可以在main.ts 文件中看到

platformBrowserDynamic().bootstrapModule(AppModule);

以上代码说明项目启动的根模块是AppModule，所以一切的配置从开始模块

@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
APP_ROUTER,

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在ngmodule中各属性的用法：
declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道
exports - declarations 的子集，可用于其它模块的组件模板。
imports - 本模块声明的组件模板需要的类所在的其它模块。
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

路由的配置：
建立app.router.ts 文件

const APP_ROUTES:Routes  = [  
    {
       path: '',
       redirectTo: 'home',
       pathMatch: 'full'
   },
   {
       path: 'home',
       component : HomeComponent
   },
   export const APP_ROUTER: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES); 

从 bootstrap: [AppComponent] 看到初始化启动组件是AppComponent。
在页面上，即 app.component.html 中写入

<router-outlet></router-outlet>

这样路由所指向的代码会注入到中，在这里可以为页面增加上下文，这些内容将会一直存在与页面上，不会根据路由改变（所以这里适合做整个项目公共部分的书写，但尽量不写，后面分模块后再配置会更好些）。

以上是一个最简单的路由，这里并没有对项目进行模块划分，但随着项目的深入，架构会越来越多，所以需要分模块，这样我们将homecomponent组件，独立出来形成home模块，同时在App模块中注入home模块（移除homeComponent组件）。

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

在路由中我们将使用子路由：

const APP_ROUTES:Routes  = [  
    {
       path: '',
       redirectTo: 'home',
       pathMatch: 'full'
   },
   {
       path: 'home',
       children : [
            {
             path: '',
             component: homeComponent
                },
            {
             path: 'list',
             component: listComponent
                }
        ]
   },]

这里子路由需要配置一个‘ ’的以便来默认加载homemodule的根组件，在这个HTML里我们同样和Appcomponent对应的HTML一样，需要使用标签来规定子路由来填充的地方。

以上是比较简单的写法，但这不利于模块化，我们将home模块自己的路由独立出来发在home对应的文件中，建立home.router.ts 文件

export const LOGIN_ROUTES:Routes = [
{
path: ' ',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'list',
pathMatch: 'full'
},
{
path: 'list',
component: ListComponent,
},]
}]

同时更改App.router 文件
为home的路由中将其改为
children： LOGIN_ROUTES

在angular2中还存在一个延迟加载模块的说法，延迟加载也是按需加载，即在需要的时候在加载，这样可以提高效率。
延迟加载的配置：
在需要延迟加载的模块路由中设置为：

const APP_ROUTES:Routes  = [  
    {
       path: '',
       redirectTo: 'home',
       pathMatch: 'full'
   },
   {
       path: 'home',
      loadChildren: "../pages/home/home.module#homeModule"
   },]

以上懒加载#前为文件路径，后面为模块名
同时在app.module中 ，将延迟加载模块从imports中移除。

在homeModule模块中引入自己的路由
子路由定义时用 RouterModule.forChild(Home_ROUTES)

仅在定义根路由时使用forRoot这个方法。

需要注意的地方：
1、配置路由导入时需要将模块的导入放在根路由导入之后，或者默认路由可能被优先匹配到
2、有懒加载时注意移除该模块在根模块的导入
3、路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它是最通用的路由，应该只在前面找不到其它能匹配的路由时才匹配它。

4、路由懒加载同时也可以使用预加载策略

在大多数场景下，预加载每个惰性加载模块就很好了，但是有时候它却并不是正确的选择，特别是在移动设备和低带宽连接下。 我们可能出于用户的测量和其它商业和技术因素而选择只对某些特性模块进行预加载。
为希望预加载的模块在路由配置中增加属性：
data: { preload: true }

预加载 ：https://angular.cn/docs/ts/latest/guide/router.html#!#custom-preloading