Angular Route 导航

Angular Route 导航

• 了解路由的基础知识
• 子路由，保护路由，辅助路由

---

SPA（single page application ) 单页应用，一个单页应用是一个主页面只加载一次，不再刷新，只是改变页面上部分内容的应用。

路由基础知识

路由相关对象

ng new router –routing
当使用 –routing参数新建一个项目的时候，ng会我们多生成一个文件app-routing.module.ts，这个文件就是当前应用的一个路由配置

angular应用是由一些组件组成的，每一个组件都有自己的模板和控制器，所有的这些组件都会被封装在一个模块里，而路由的配置，也就是Routes对象就是存在于这个模块中的，Routes对象由一组配置信息组成，每个配置信息都至少包含两个属性：

• 
  
• path属性：用来指定浏览器用的url
• component属性：用来指定相应的组件
  
  

注意：路由器使用先匹配者优先的策略来匹配路由，所以我们在匹配路由的时候一般把具体的路由放在前面，通配符的路由放在后面，只有在前面找不到其他匹配的路由的时候才使用通配的路由，通配符配置的路由一定要放在路由配置的最后面。

在路由时传递数据

在查询参数中传递数据

: /product?id=1&name=2

同等

ActivatedRoute.queryParams[id]

ActivatedRoute.queryParams[name]

举个栗子：

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品页面</a>

export class ProductComponent implements OnInit {

  private productId: number;

  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {
       this.productId = this.routeInfo.snapshot.queryParams["id"];
  }

}

---

: {path:/product/:id}

同等

/product/1

ActivatedRoute.params[id]

在路由配置中传递数据

{path:/product,component:ProductComponent,data:[{isProd:true}]}

同等

ActivatedRoute.data[0][isProd]

{ path: 'product_2/:id', component: ProductComponent },//这个是在路由配置中传递数据

 //这个是在路由配置中传递数据
    this.productId_2 = this.routeInfo.snapshot.params['id'];

参数订阅 参数快照

对比参数快照和参数订阅的栗子：

这是参数订阅：
参数订阅是rxjs里面的语法
this.routeInfo.params.subscribe((params: Params) => {
      this.productId_3 = params['id'];
    });

这是参数快照：

this.productId_2 = this.routeInfo.snapshot.params['id'];

在商品详情被创建的时候，它的constructor方法会被调用，然后它的onInit(）方法会被调用一次。当我们从商品详情组件路由到商品详情组件的时候，由于从一个组件路由到同一个组件时这个组件已经被创建了，它就不会再次被创建，这个onInit()方法就不会再次创建，所以里面有些初始化的属性的值依然会保持第一次被创建时候的值。解决这个问题的方法就叫参数订阅，造成那个问题的方式就叫参数快照

重定向路由

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

  { path: '', redirectTo:'/home',pathMatch:'full' },//这句话的意思是：当我们访问一个空字符串的路径时，把当前的路由重定向到home这个路由上

子路由