Angular4.0踩坑之路：探索子路由和懒加载

参考文章：

Angular4路由快速入门  http://www.jianshu.com/p/e72c79c6968e

Angular2文档学习的知识点摘要——Angular模块（NgModule）http://lib.csdn.net/article/angularjs/59697?knId=641

 

随着需求的增长，项目的功能也渐渐复杂起来。这个时候，须要将项目模块化，将组件、指令和管道打包成内聚的功能块，正好能够探索一下Angular4中的子路由以及模块的懒加载。

以前在开发的时候，已经在根模块实现了简单的路由功能，能够总结为如下三个步骤：

一、在app.module.ts文件中加载路由库，而且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。

import { RouterModule } from '@angular/router';

......

@NgModule({
    declarations: [......],
    imports: [
        ......,
        RouterModule.forRoot(appRoutes),
    ],
    providers: [],
    bootstrap: [AppComponent]
})

二、在壳组件中增长导航条，其中routerLink指令指向路由的目标，routerLinkActive为选中的标签增长css样式

<a routerLink="/home" routerLinkActive="active"></a>

三、往壳组件的模板中添加一个router-outlet指令，视图将会被显示在那里

<router-outlet></router-outlet>

现在在这个基础上想要实现子路由以及模块的懒加载，文章Angular4路由快速入门中讲得比较清楚了，这里记录一下在开发过程当中我所遇到的一些问题以及注意点。

 

RouterModule.forRoot() 和 RouterModule.forChild()

RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

RouterModule.forRoot()方法用于在主模块中定义主要的路由信息，RouterModule.forChild()与 Router.forRoot()方法相似，但它只能应用在特性模块中。

即根模块中使用forRoot()，子模块中使用forChild()。

 

子路由

假设在咱们 /settings 设置页面下有 /settings/profile 和 /settings/password 两个页面，分别表示我的资料页和修改密码页。setting做为一个独立的功能块，能够将其封装成一个特性模块。它拥有本身独立的路由，profile和password两个页面的路由能够设置成子路由。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [
  {
    path: '',
    component: SettingsComponent,
    children: [
      { path: 'profile', component: ProfileSettingsComponent },
      { path: 'password', component: PasswordSettingsComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,//注意这里引入的CommonModule，它的做用后面会专门讲到，这里不引入的话页面会报错

    RouterModule.forChild(ROUTES)
  ],
})
export class SettingsModule {}

在SettingsModule 模块中咱们使用forChild()方法，由于SettingsModule不是咱们应用的主模块。

另外一个主要的区别是咱们将 SettingsModule 模块的主路径设置为空路径 ('')。由于若是咱们路径设置为 /settings，它将匹配 /settings/settings。经过指定一个空的路径，它就会匹配 /settings 路径。

 

懒加载：loadChildren

在根模块AppModule中配置setting模块的路由信息：

export const ROUTES: Routes = [
  {
    path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule'
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

这里使用到了懒加载LoadChildren属性。这里没有将SettingsModule导入到AppModule中，而是经过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载SettingsModule 模块。这就是模块懒加载功能的具体应用，当用户访问 /settings/** 路径的时候，才会加载对应的 SettingsModule 模块，这减小了应用启动时加载资源的大小。

loadChildren的属性值由三部分组成：

须要导入模块的相对路径

#分隔符

导出模块类的名称

 

CommonModule模块

以前说到在特性模块中要引入CommonModule模块，我一开始没有注意到要在特性模块中引入，结果在路由的时候页面报错：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'div'.

Can't bind to 'ngForOf' since it isn't a known property of 'p'.

Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

Can't bind to 'ngIf' since it isn't a known property of 'div'.

......

相似这种一大堆错误，感受像是 'ngClass' 'ngFor' 'ngIf'这样的指令都没有定义似的。

检查了很久，发现是由于我在特性模块中没有引入CommonModule，引入以后这些错误就都消失了。

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    ......
  ],
})

那么CommonModule模块具体的做用是什么呢？看这篇文章

CommonModule提供了不少应用程序中经常使用的指令，包括NgIf和NgFor等。更准确地说，NgIf等指令是来自@angular/common的CommonModule中声明的。 

咱们在根模块AppModule中导入了BrowserModule模块，BrowserModule导入了CommonModule而且从新导出了它。最终的效果是：只要导入BrowserModule就自动得到了CommonModule中的指令。

导入BrowserModule会让该模块公开的全部组件、指令和管道在AppModule下的任何组件模板中直接可用，而不须要额外的繁琐步骤。可是在其它任何模块中都不要导入BrowserModule。特性模块和惰性加载模块应该改为导入CommonModule。它们不须要从新初始化全应用级的提供商。 若是你在惰性加载模块中导入BrowserModule，Angular就会抛出一个错误。 

 以上就是我在这两天使用Angular子路由和懒加载中遇到的一些问题和总结。