angular 路由传参的三种方式

1. 问号后面带的参数

url：http://localhost:4200/news?key=japan

html 调用方法：

<a [routerLink]="['/news']" [queryParams]="{key:'japan'}"> 跳转 </a>

ts 调用方法：

// 构造函数传入
private router: Router
// 路由跳转
this.router.navigate(['/news'], {queryParams: {key : 'japan'}});

获取参数方法：

private route: ActivatedRoute;

this.route.queryParams.subscribe(queryParams=> {  
   console.log(queryParams.key);  
});

const key = this.route.snapshot.queryParams['key'];

console.log("key", key);

2. 路由路径传参

url：http://localhost:4200/news/japan （注意：这里的路由参数是必须的）

路由路径配置：

path: 'news/:key',  
component: NewsComponent

html 调用方法：

<a [routerLink]="['/news','japan']"> 跳转 </a>

ts 调用方法：

private router: Router

this.router.navigate(['/news', 'japan']);

获取参数方法：

this.route.params.subscribe(params => {  
  console.log("params", params.key);  
});  
const key = this.route.snapshot.params['key'];  
console.log("key", key);

3. 在路由配置中传参（注意：可以用于自定义路由预加载）

路由路径配置：

path: "news",  
component: NewsComponent,  
data: {key: "hero"}

获取参数方法：

this.route.data.subscribe(params => {  
  console.log("params", params.key);  
});  
const key = this.route.snapshot.params['key'];  
console.log("key", key);