【angular】使用EventEmitter实现自定义事件

在angular开发中，经常会遇到子组件与父组件通信的问题，父组件可以通过类似属性绑定的方式将值赋到子组件标注 @Iutput 的属性上，反之，如果子组件需要将值传递到父组件，使用事件来传递是常用的方案之一。下面对自定义事件做简单介绍：

1、需求

创建两个组件，一个父组件，一个子组件，子组件中有个表单和按钮，父组件嵌入子组件到页面中。需要达到的效果是：在子组件的表单中输入内容，再点击子组件中的按钮，将子组件表单中的内容传递给父组件，并在父组件中显示出来。示意图如下：

2、子组件实现核心

核心要点有三点：

1. 使用@Output注解修饰属性（表示子组件可以向上触发事件）
2. 使用EventEmitter类，此类用于传递事件
3. 调用EventEmitter的emit()方法，用于触发事件

子组件的TypeScript代码如下【注意代码12、19行】：

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-app-event-child',
  templateUrl: './app-event-child.component.html',
  styleUrls: ['./app-event-child.component.css']
})
export class AppEventChildComponent{
  username: string; // 与表单绑定的本地变量

  // 事件传递的核心对象，要点：1、@Output；2、EventEmitter
  @Output() myEvent: EventEmitter<any> = new EventEmitter();

  /**
   * 推动username到父组件
   */
  pushUserName(): void {
     // 将事件传递到上一层
    this.myEvent.emit(this.username);
  }

}

子组件的html代码如下【注意代码8、13行】：

<div>
  <form nz-form class="myForm">
    <nz-card nzTitle="使用自定义事件传递表单内容到父组件">
      <nz-form-item>
        <nz-form-control>
          <nz-form-label>用户名</nz-form-label>
          <nz-input-group>
            <input type="text" nz-input name="username" [(ngModel)]="username">
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <button nz-button nzType="primary" (click)="pushUserName()">传递到父组件</button>
      </nz-form-item>
    </nz-card>
  </form>
</div>

3、父组件实现核心

核心要点分为三点：

1. 引入子组件时，使用事件绑定语法绑定子组件的@Output修饰的属性
2. 实现事件触发所调用的函数
3. 调用函数如果有参数传递，一定要传入 $event

父组件的TypeScript代码如下【注意：12~16行代码】：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-app-event',
  templateUrl: './app-event.component.html',
  styleUrls: ['./app-event.component.css']
})
export class AppEventComponent {

  name: string; // 父组件中用于存储从子组件传入的内容
  // 子组件事件触发应执行的
  onUsernamePushed(username): void {
    console.log('获取子组件的参数');
    console.log(username);
    this.name= username;
  }
}

父组件的HTML代码如下【注意第8行代码】：

<div>
  <h3 nz-title>从子组件获取到的内容如下：</h3>
  <nz-alert nzMessage="暂无消息获取到" nzType="error" nzShowIcon *ngIf="!username"></nz-alert>
  <nz-alert nzShowIcon nzType="info" [nzMessage]="username" *ngIf="username"></nz-alert>
</div>
<br>
<br>
<app-app-event-child (myEvent)="onUsernamePushed($event)"></app-app-event-child>

赏

谢谢您对蓝亭的支持！

支付宝