Angular 路由

通常都是在独立的顶级模块中加载和配置路由器，然后由根模块AppModule导入它。按照惯例，这个文件位于 src/app下，名字叫做 app-routing。
--flat把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到AppModule的imports 数组中。

// 在主目录下创建路由
ng generate module app-routing --flat --module=app 

生成的文件内容如下：

app-routing.module.ts
其中RouterModule.forRoot()方法用于在主模块中定义主要的路由信息，用在根模块中。还有一个方法 RouterModule.forChild()，这个就是用于子模块中的。

---

1. Routes是路由配置，它有两个属性：path和component。可以根据不同的URL，跳转去不同的页面。用法如下：

import { loginComponent } from 'xxxx/login.component ';
import { homeComponent } from 'xxxx/home.component ';

const routes: Routes = [
  // 添加默认路由
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  // 当用户访问的页面不存在时，这个路由必须放在最后。  
  { path:'**', component: Code404Component }
];

2. Router-Outlet：页面占位符指令

<router-outlet></router-outlet>

3. Router：有两个常用方法 navigate()和navigateByUrl()，用于导航到一个指定的路由

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

constructor(private router: Router){}
toXXX(){
    this.router.navigate(['/login']);
}

4. routerLink： html中声明路由导航用的指令

// 写法一
<a routerLink="/login">Login</a>
// 写法二
<a [routerLink]="['/login']"></a>

---

有关路由配置

路由重定向：用户访问一个特定的地址时，将其重定向到另一个指定的地址。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }
];

子路由：嵌套在路由里的路由就是子路由。假设我们的home页面下有aaa和bbb两个页面，举个栗子：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', 
    component: HomeComponent, 
    children: [
      { path: '/aaa', component: AaaComponent},
      { path: '/bbb', component: BbbComponnet}
    ] 
  }
];

子路由将继承副路由的路径，因此aaa和bbb页面的路由匹配地址是/home/aaa和 /home/bbb。
定义好子路由以后，就要使用子路由，在HomeComponent组件中添加 <router-outlet></router-outlet>指令到你要显示 aaa/bbb 页面的位置就好了。

loadChildren
我第一次看到这个东西是在做项目的时候，有一天发现同事更改了路由配置，用到了loadChildren。这个呢是用于让路由获取另一个模块中定义的子路由。
所以要使用loadChildren, 我们就需要先新建一个模块。
ng g module home/home-routing，运行后得到如下结果：

新建的home-routing模块 需要注意的是，不需要将这个新建的模块导入 AppModule 中，因为路由依据 loadChildren 属性配置的路径去加载 HomeModule ，即懒加载功能。只有当用户访问 /home/xxx 路径的时候，才会加载对应的模块。

点开home-routing文件：

home-routing模块 生成的路由模块中通常不会去声明组件，所以可以删除 declarations，以及对CommonModule 的引用 。并且导入 RouterModule 和 Routes 。