angular 路由传参的三种方式

1.问号后面带的参数

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

html调用方法：

跳转

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调用方法：

跳转

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);