Angular - 路由

1. spa(single page application)概念:
    单页面应用，锚点值切换，一个路由对应一个页面。一个单页应用使主页面只加载一次不再刷新，只改变页面上部分内容的应用。
2. 路由相关对象

名称	简介
Routes	路由配置，保存着哪个URL、对应展示哪个组件，以及在哪个RouterOutlet中展示哪个组件。
RouterOutlet	在Html中标记路由内容呈现位置的占位符指令。(插座)
Router	负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。
RouterLink	在Html中声明路由导航用的指令。用在a标签里。
ActivatedRoute	当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等。

可以看一下5个路由对象在整个的angular应用中的位置：

 Angular应用都是由一些组件构成的，比如AppComponent、组件A、组件B，每一个组件都由模板和控制器；应用启动后会首先展示AppComponent模板，所有的组件都会被封装在一个模块里，而路由的配置也就是Routes对象就存在模块中，Routes对象由一组配置信息组成：

注意：   
    1.  在path属性定义url时不要写 '/ first-component' 来配置路由,因为Angular的路由器会为我们解析和生成url，不用 / 开头是为了在多个视图间导航时自由切换相对路径和绝对路径；
    2.

      当浏览器地址是/user时，应用应该展示组件A。在AppComponent组件模板中，使用RouterOutlet 指令来指定组件A的位置，RouterOutlet写在哪里组件A就展示在哪里；
       如果想展示组件B可以在页面上通过一个链接来改变浏览器的地址，而 RouterLink 指令就是用来在模板上生成这样一个链接:

<a [routerLink]="['/']"> 主页</a>  //此时路径中是需要写 / 的
<a [routerLink]="['/product']"> 产品详情页</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>  // 在视图加载时,这个riuter-outlet插座的作用就是在哪里来显示组件的内容

// [routerLink]="['./']" 路径中加.时是指导航到一个子路由,不加.就是导航到一个根路由。

       我们可以看到这个routerLink的参数是个数组而不是个字符串，是因为我们可以在路由里传递参数，可以在这个数组里传递参数；
       另外也可以通过在组件的控制器中通过调用Router对象的nagivate()方法来改变浏览器的地址从而实现路由的转换：

export class AppComponent {
 constructor(private router: Router) {}
  
 toProductDetails() {  // toProductDetails()方法和html中的routerLink的作用是一样的：导航到商品详情页，只不过这个方法是在控制器中通过Router对象的nagivate()方法实现路由的跳转
   this.router.navigate(['/product']);
 }  
}

       最后可以使用url来传递一些数据，而这些数据就会保存在ActivatedRoute对象中。

3. 在路由时查询数据
  1. 在查询参数中传递数据 

/product?id=1&name=2   =>  ActivatedRoute.queryParams[id]
路径 + ? + 参数名字 + =参数的值 的格式来传递数据
在路由的目标组件中使用ActivatedRoute.queryParams这个参数来获取到传递的数据id=1或者name=2

   2. 在路由路径中传递参数 

{path:/product/:id}  => /product/1  =>  ActivatedRoute.params[id]
在定义路由的路径时就要指定参数的名字  => 在实际的路径中携带这个参数 =>  在路由的目标组件中使用ActivatedRoute.queryParams这个参数来获取到传递的数据id=1

  3. 在路由配置中传递参数 

{path:/product, conmpnent: ProductComponent, data:[{isProduct: true}]}  =>  ActivatedRoute.data[0][isProduct]
通过data这样一个参数来定义一些静态的数据，data参数本身是个数组,在里面可以定义多个对象,在每个对象中定义任意的属性,在路由的目标组件中使用ActivatedRoute.data这个参数定义的数组，通过数组下标拿到对应的对象