angular使用queryParams在两个页面间传值

1、A组件的数据传送到B组件中使用
在A组件中

import { Router } from '@angular/router';
 constructor( private router: Router ) { }
 
 this.router.navigate(['system/news(页面B的路由)'],{
      queryParams: {
        name(随意起): record.flowName(页面A中的数据),
        id(随意起): record.flowMajorKey(页面A中的数据)
      }
});

B组件中

import { Router, ActivatedRoute } from '@angular/router';
 constructor( private activateInfo: ActivatedRoute ) {};
 
  this.activateInfo.queryParams.subscribe(params =>{
            this.flowMajorKey(B组件的数据)=params.id(A组件中,自己起的名字对应);
            this.flowName(B组件的数据)=params.name(A组件中,自己起的名字对应);
        })

2、类似查看新闻的路由,点击不同的新闻传送这条新闻的id过去
A组件中:

 constructor(
    private router: Router) { }
    
 this.router.navigate(['allnews/new', id])

若要写在HTML页面

<a [routerLink]="[''allnews/new',id]">新闻1a>

A1/A2/A3
注意要配A1/A2/A3的路由

  { path: 'new/:id', component: NewComponent },
 constructor(
    private route: ActivatedRoute ) { }
    
    id:any;
    this.route.params.subscribe(params => { this.id= params['id'] })

3、即要传递路由path,又要传递参数,两者结合
A组件到B组件,同时还要传递一个参数
在A组件中:

  this.router.navigate(['allnews/new', id], {
      queryParams: {
        title: this.title
      }
    })

B组件接收:

constructor(private route: ActivatedRoute ) { }

	//传递的是path
    this.route.params.subscribe(params => {
       this.id= params['id']
    });
    //传递的是参数
    this.route.queryParams.subscribe(params => {
      this.title=params.title
    })

你可能感兴趣的:(传值)