参数快照

如果不路由就没事

<input type="button" name="" value="商品详情" (click)='toProductDetails()'>
import { Component } from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
constructor(private router:Router){

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

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Params} from '@angular/router';
@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() {
    this.routeInfo.params.subscribe((params:Params)=>this.productId=params['id']);
    // this.productId=this.routeInfo.snapshot.params['id']
  }

}