angular的click事件，可以写成

<input type="button" value="商品详情" (click)="toProductDetails();">

对应的页面跳转可以写成

export class AppComponent {
  title = 'router';

  constructor(private router:Router) {
  }

  toProductDetails() {
    this.router.navigate(['/product'])
  }
}

navigate导航可以添加参数变成 this.router.navigate(['/product',2018])，从而在点击btn的时候获取参数，如下图所示

但是会出一个问题，点击商品详情btn的时候显示为2018，但是点击product本来显示的不是2018，但是还是显示了2018，这个是为什么呢？

home component 路由到商品详情组件的时候，在它被创建的时候，他的构造方法会被调用，然后它的ngOnInit的方法会被调用一次，但是当我们从商品详情组件路由到商品详情组件的时候，由于已经被创建了，所以他不会再次被创建，不会被再次创建的话，这个ngOInit的方法，所以这个product id属性依然保持着，第一次被创建时所赋予的，解决这个问题的方法就叫做参数订阅，我们现在使用的这种方式，叫做参数快照--snapshot，参数快照就是这个，这是快照的意思。

现在我们把这个方法都是，方式改成参数订阅！

ngOnInit() {
    this.routeInfo.params.subscribe((params:Params) => this.productId = params["id"]);
    //this.productId = this.routeInfo.snapshot.params["id"];
  }