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]">新闻1</a>

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
    })
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 中,组件的父子传值可以通过输入属性(@Input)和输出属性(@Output)来实现。 1. 父组件向子组件传值(通过输入属性): - 在子组件的类中,使用 `@Input()` 装饰器定义一个输入属性,例如 `@Input() value: string;`。 - 在父组件的模板中,使用子组件的标签,并通过绑定属性的方式将递给子组件,例如 `<app-child [value]="parentValue"></app-child>`。 2. 子组件向父组件传值(通过输出属性和事件): - 在子组件的类中,使用 `@Output()` 装饰器定义一个输出属性,并创建一个事件发射器,例如 `@Output() valueChange: EventEmitter<string> = new EventEmitter<string>();`。 - 在子组件中的某个适当的时机,调用事件发射器的 `emit()` 方法来触发事件,并递需要递给父组件的,例如 `this.valueChange.emit(newValue);`。 - 在父组件的模板中,使用子组件的标签,并绑定相应的事件处理函数来接收子组件发出的事件,例如 `<app-child (valueChange)="onChildValueChange($event)"></app-child>`。在父组件的类中,实现名为 `onChildValueChange()` 的事件处理函数来处理子组件递过来的。 通过上述方式,父组件和子组件之可以进行简单和复杂的数据递,并实现双向通信。这种组件通信的方式可以有效地在 Angular 应用程序中递和共享数据,以实现组件之的交互和协作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值