（一）路由介绍：

      1：几个关键词的简介

    2：每个关键词应该用到的地方

3：一个简单路由的配置，实现的效果如图

  1：先生成两个组件（Home，Product）

   2：app-routing.module.ts(这个文件在你创建项目的时候后面加一个参数 -routing  例如：ng new myAngular -routing)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';//Routes：这里是根路由
const routes: Routes = [//path：指路由的路径。component：指路由的目标组件{ path:'' , component:HomeComponent},{ path:'product' , component:ProductComponent}, //这里配置的是一个页面不存在的路由{ path:'**' , component:Code404Component},
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {constructor(){}}

app.component.html

<a [routerLink]="['/']">主页</a>
<!--  1:用参数来传递商品属性的值。queryParams传递参数id的值为1-->
<!-- <a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a> --><!-- 2:用URL来传递商品的属性值 -->
<a [routerLink]="['/product']" >商品详情</a>
<!-- <input  type="button" value="商品详情" (click)="showProducts1()"> -->
<router-outlet></router-outlet>

 home.component.html

<p>这是HomeComponent!
</p>

product.component.html

<p>这是ProductComponent!
</p>

(二)路由传递参数

     路由传递参数（1：在查询参数中传递参数   2：在路由路径中传递参数）

1：在查询参数中传递参数 

     

app.component.html  以queryParams传递参数

<--  1:用参数来传递商品属性的值。queryParams传递参数id的值为1-->
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

product.component.ts    用ActivateRoute接收

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';@Component({selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {private productId:number;constructor(private  routeInfo:ActivatedRoute) {}ngOnInit() {// 1:接受以路由参数传过来的参数，ActivatedRoute当前激活的路由对象，可以获取路由地址，以及路由参数this.productId=this.routeInfo.snapshot.queryParams["id"];}}

product.component.html   用差值表达式在页面接收显示

<p>商品的id为：{{productId}}
</p>

2：在路由路径中传递参数 （主要是传递和接收和上一种方式不一样，其他都一样）

   app-routing.module.ts文件修改path

 //2:以URL的方式传商品属性的值{ path:'product/:id' , component:ProductComponent},

  product.component.ts   修改接收用params

 this.productId=this.routeInfo.snapshot.params["id"];

app.component.html

<a [routerLink]="['/product',1]" >商品详情</a>

**************************************************************

参数快照和参数定略（注：当一个路由从自身路由到自身使用参数定略的方式，反之参数快照的方式）

  // 1：参数快照方式。由于OnInit()在组件创建的时候只执行一次，所以第二次获取商品id的时候还是第一次传过来的值this.productId=this.routeInfo.snapshot.params["id"];//2:参数定略方式（完美的解决了参数快照的问题）。this.routeInfo.params.subscribe会获得一个params的值然后把params["id"]赋值给productIdthis.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

（三）路由重定向

//路由重定向：当''路由过来时先重定向到/home然后在到home{path:'',redirectTo:'/home',pathMatch:'full'},//path：指路由的路径。component：指路由的目标组件{ path:'home' , component:HomeComponent},