Angular中路由传值的几种方法

在Angular中，当使用路由(Router)功能从一个界面装换到另一个界面时，我们可以有多种传值的方法。

通过构造URL参数来传值

这种方法就是通过构造带参数的URL来进行传值，例如目标地址为”/detail”, 需要为该页面传送名为’id’的参数，所以需要构造的URL为：”detail?id=1”

设置参数

1. 第一种写法: 在模版html中通过链接来构造

   <a routerLink="/detail" [queryParams]="{id:task.id}">Edit</a>

2. 第二中写法: 在ts程序代码中构造

   this.router.navigateByUrl('detail' + '?id=' + task.id);

3. 第三中写法: 在ts程序代码中构造

   this.router.navigate(['/detail'], {
     queryParams: {
       id: task.id
     }
   });

接收参数

在目标页面，接收三种方式传值方式的代码是一致的，

使用subscribe

this.activatedRoute.queryParams.subscribe(
  params => {
    console.log('id = ' + params['id']);
  }
);

使用snapshot属性、

console.log('url query id = ' + this.activatedRoute.snapshot.queryParams['id']);

通过URL路径传参

使用这种方法，首先需要在route的路径配置中标明路径中的参数，方法是在路由配置文件中定义路由(默认app-routing.module.ts)

{
  path: 'detail/:id',
  component: TodoDetailComponent
}

设置参数

1. 第一种写法: 在模版html中通过链接来构造

   <a [routerLink]="['/detail', task.id]">Edit</a>

2. 第二中写法: 在ts程序代码中构造

   this.router.navigate(['/detail', task.id]);

接收参数

在目标页面，接收这两种方式传值方式的代码是一致的，

使用subscribe

this.activatedRoute.params.subscribe(
  param => {
    console.log('path id = ' + param['id']);
  }
)

使用snapshot属性

console.log('snapshot path id = ' + this.activatedRoute.snapshot.params['id']);

在路由表中配置静态参数

修改路由配置(默认app-routing.module.ts)

{
  path: 'detail/:id',
  component: TodoDetailComponent,
  data: [{mode: 'edit'}]
}

接收静态参数

console.log('mode = ' + this.activatedRoute.snapshot.data[0]['mode']);