如何在Angular 9中将两个参数传递给EventEmitter？

在Angular中，我们可以在两个方向上传输数据，即：内部：传输到子组件，外部：传输到父组件。为了将数据发送到子组件，我们使用属性绑定，而对于后者，我们使用EventEmitter。

在本文中，我们将讨论EventEmitter指令以及如何在其中传递2个参数。

让我们看一下EventEmitter的源代码：

export declare class EventEmitter 
                  extends Subject {
    __isAsync: boolean;
    constructor(isAsync?: boolean);
    emit(value?: T): void;
    subscribe(
        generatorOrNext?: any, error?:
            any, complete?: any): any;
}

很明显，在emit方法中只能传递一个类型为T的参数，因此我们不能将两个参数直接传递给它。相反，我们可以创建一个包含所有参数的对象，并将该对象作为单个实体传递。

方法：

• EventEmitter允许我们发出任何类型的对象，因此我们将利用它。
• 为了传递参数，我们将所有参数包装在大括号内(这会将它们组合为单个对象)，并将其传递给emit方法。
• 为了在父组件中接收参数，我们将创建类似类型的对象，并使用接收到的对象更新其值。

句法：

@Output() sendobject = new EventEmitter();

this.sendobject.emit({stringval, numval, ...});

示例：我们将在子组件中创建两个属性，并通过使用EventEmitter在父组件中接收它们。

子组件的代码：

import { 
       Component, OnInit, EventEmitter, Input, Output
      } from '@angular/core';
  
@Component({
  selector: 'app-test',
    
  template: `
    
child component

    
{{name}}
    
{{age}}
    send data
  `,
  styles: []
})
export class TestComponent {
  
  constructor() { }
  
  public name = "geek2";
  public age = 22;
    
  /* we will define the type of the
     an object that will be emitted.*/
    
  @Output() public data = 
        new EventEmitter<{name:string, age:number}>();
  
  send_name_age()
  {
    
  /* we will wrap the parameters 
     to be sent inside the curly brackets.*/
    
    this.data.emit({name:this.name, age:this.age});
  }
  
  ngOnInit(): void {
  }
  
}

父组件的代码：

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    template: `
   
    

        
parent component
        
{{model.name}}
        
{{model.age}}
    
     
    /* The data that is sent by the
       child component will be 
       received in the */
   
    /* Parent component as a parameter 
       for change_name_age method. */
   
  
  
   
  `,
    styleUrls: []
})
export class AppComponent {
  
    /* Create a model of the type that is 
       emitted by the child component to 
       receive it.*/
  
    public model = { name: "geek1", age: 24 }
  
    change_name_age(data) {
  
        /* Update the current model with
           the value sent by the child 
           component. */
        this.model = data;
    }
}

输出：

从父级组件的子组件中成功接收了年龄和姓名。

• 接收姓名和年龄之前：
  
• 从子组件接收到父组件的名称和年龄后，该名称和年龄会更新。