angular 路由传参的三种方式

标签：注意   gate   scom   调用   activate   vat   blank   params   outer   

1. 问号后面带的参数

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

html 调用方法：

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

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‘]"> 跳转

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

angular 路由传参的三种方式

标签：注意   gate   scom   调用   activate   vat   blank   params   outer   

原文地址：https://www.cnblogs.com/hanlk/p/14219480.html