使用Anglar Router导航

1. 路由基础，路由相关对象

• Routes 路由配置，保存着url对应展示哪个组件，以及在哪个RouterOutlet中展示组件
• RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令
• Router 负责在运行时执行路由对象，可以通过调用其navigate（）和navigateByUrl（）方法来导航到一个指令的路由
• RouterLink在HTML中声明路由导航用的指令
• ActivatedRoute 当前激活路由对象，保存路由信息，如路由地址，路由参数

2. 新建一个路由项目，并生成一个home组件和一个product组件

ng new router –routing
ng g component home
ng g component product

3. 会额外生成一个app-routing-module.ts模块，在主模块的import会导入一个AppRoutingModule，在路由模块中配置路由

import {HomeComponent} from './home/home.component'
import {ProductComponent} from './product/product.component'
const routes: Routes = [
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent}
];

4. 使用路由进行导航()表示事件绑定，表示绑定click事件（类似vue的@）

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>

5. 使用绑定的click跳转路由

export class AppComponent {
  title = 'route';
  constructor(private router:Router) {
    
  }
  toProductDetails() {
    this.router.navigate(['/product'])
  }
}

6. 通过这样的配置，当用户访问不存在的地址时，页面显示code404组件的内容（在设置这个路由时，要把这个通配符的路由放到最后，因为它是最通用的路由，只有当路由匹配不到时，才能够让其匹配）

{path:'**',component:Code404Component},

---

在路由时传递数据

1. 在查询参数中传递数据，/product?id=1&name=2通过ActivatedRoute.queryParams[id]，获取id的值

• 在商品详情组件中接收主界面传递的商品的id

<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"]  }
}

2. 在路由的路径中传递数据，{path:/product/:id} => /product/1，ActivatedRoute.params[id]获取id

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

export class ProductComponent implements OnInit {
  private  productId:number
  constructor( private routeInfo:ActivatedRoute){

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

• 参数快照snapshot，这个方法的弊端是只有在组件在被创建时才会被调用一次，如果其他路径也会定位到这个组件中时，点击原本的导航将不会改变获取的id可以通过参数订阅来解决，将ngOnInit修改

this.routeInfo=this.subscribe((params:Params)=>this.productId=params["id"])

3. 在路由配置中传递数据，{path:'product',component:ProductComponent,data:[{isProd:true}]}，ActivatedRoute.data[0][isProd]来获取isProd的值

---

重定向路由

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

const routes: Routes = [
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'**',component:Code404Component},

];