angular 路由跳转传值(news组件向newsDetail组件传值)

*！angular 界面传值，无论在路由配置的时候有没有设置参数，传参的实质都是要求路径后面的参数必须是对象！*

一：GET传值

1️⃣将对应的news和newsDetail组件导入 app-routing.module.ts，并配置路由

 

2️⃣在要传值组件的.html文件配置routerLink(开始传值)

//将要传入newsDetail组件的数据赋值给 queryParams（queryParams接收的是对象数据）
<a [routerLink]="[ '/要接收值的组件路径']" [queryParams]=data> </a>

3️⃣在要接收传值组件的.ts文件导入ActivatedRoute组件并初始化,并获取传入数据

// 导入ActivatedRoute组件
import { ActivatedRoute } from '@angular/router'

...

 constructor(

    public activatedRoute:ActivatedRoute

  ) { }

...

ngOnInit() {
   // 接收到的传入数据

this.activatedRoute.queryParams.subscribe((data)=>{

     console.log(data)
   })
}

 

 

二：动态路由传值

1️⃣将对应的news和newsDetail组件导入 app-routing.module.ts，并配置路由,

①如果要接收数据路由路径的后面添加 /:参数名  ，如下代码，则2️⃣中的参数必须是字符串类型的数据；

②如果要接收数据路由路径的后面不添加 /:参数名 ，则2️⃣中的参数必须是对象数据；

// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径/:参数(接收传入的数据)',component:要接收数据的组件名},
或
// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径',component:要接收数据的组件名},

 

 

2️⃣在要传值组件的.html文件配置routerLink(开始传值)

// 传递的参数
<a [routerLink]="[ '/接收数据组件的路径', data（要传递的数据 ）]"> </a>

 

 

3️⃣在要接收传值组件的.ts文件导入ActivatedRoute组件并初始化,并获取传入数据

// 导入ActivatedRoute组件
import { ActivatedRoute } from '@angular/router'

...

 constructor(

    public activatedRoute:ActivatedRoute

  ) { }

...

ngOnInit() {
   // 接收到的传入数据
   this.activatedRoute.params.subscribe((data)=>{
     console.log(data)
   })
}

 

三：js动态传值

1️⃣将对应的news和newsDetail组件导入 app-routing.module.ts，并配置路由,

①如果要接收数据路由路径的后面添加 /:参数名  ，如下代码，则2️⃣中的参数必须是字符串类型的数据；

②如果要接收数据路由路径的后面不添加 /:参数名 ，则2️⃣中的参数必须是对象数据；

// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径/:参数(接收传入的数据)',component:要接收数据的组件名},
或
// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径',component:要接收数据的组件名},

 

2️⃣在要传值组件的.ts文件导入 Router 组件，并在 constructor 中声明，然后对应跳转的方法实现传值；如下：

import { Router } from '@angular/router';
...

constructor(

    public router:Router

  ) { }
...

 xxxfunction(){
    this.router.navigate(['/接收传值组件的路径',传入的数据])
  /*或者
    this.router.navigate(['/接收传值组件的路径'],{queryParams:传入的数据});
  */  
  }

 

3️⃣在要接收传值组件的.ts文件导入ActivatedRoute组件并初始化,并获取传入数据

// 导入ActivatedRoute组件
import { ActivatedRoute } from '@angular/router'
...

  constructor(
    public activatedRoute:ActivatedRoute
  ) { }
...

this.activatedRoute.params.subscribe((data)=>{
      console.log(data)
 })
/*或
 this.activatedRoute.queryParams.subscribe((data)=>{
      console.log(data)
  })
*/

 

四：路由get传值js跳转

1️⃣将对应的news和newsDetail组件导入 app-routing.module.ts，并配置路由,

①如果要接收数据路由路径的后面添加 /:参数名  ，如下代码，则2️⃣中的参数必须是字符串类型的数据；

②如果要接收数据路由路径的后面不添加 /:参数名 ，则2️⃣中的参数必须是对象数据；

// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径/:参数(接收传入的数据)',component:要接收数据的组件名},
或
// 动态路由传值需要在要接收数据路由路径的后面添加 /:参数名
{path:'路径',component:要接收数据的组件名},

 

2️⃣在要传值组件的.ts文件导入 Router ,NavigationExtras组件，并在 constructor 中声明，然后对应跳转的方法声明一个属性为

NavigationExtras的变量，将要传的值写到此变量内；如下：

// 引入组件
import { Router ,NavigationExtras} from '@angular/router';
...

// 声明 Router
  constructor(
    public router:Router
  ) { }
...

// 定义属于NavigationExtras类型的变量
 xxxFunction(){
    let navigationExtras: NavigationExtras = {
      queryParams:对象数据,
      fragment: 'anchor'
    };
    this.router.navigate(['/接收传值组件路径'],navigationExtras);
  }

 

3️⃣在要接收传值组件的.ts文件导入ActivatedRoute组件并初始化,并获取传入数据

// 导入ActivatedRoute组件
import { ActivatedRoute } from '@angular/router'
...

  constructor(
    public activatedRoute:ActivatedRoute
  ) { }
...

 this.activatedRoute.queryParams.subscribe((data)=>{
      console.log(data)
  })